Éléments de carte dans angular 6

Question

JSON

{ success: true, data {...}, calendar {...}

Composant

import { Component, OnInit } from '@angular/core';
import {MonthlyViewService} from "../../../monthlyView.service";
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
  constructor(private  monthlyViewService: MonthlyViewService) {}
  ngOnInit() {
    this.monthlyViewService.getMonthlyData().subscribe(res => {
      let data = res.map(res => res.data);
      console.log(data);
    })
  }
}

Dans le code ci-dessus, je veux accéder aux données, aux données calendaires de la réponse et les stocker dans différents tableaux. Je reçois une erreur sur map - map n'existe pas sur le type d'objet. Une solution ?

Answer 1

1. Opérateur de carte de RxJs

Selon la documentation officielle de l'opérateur Map de RxJs,

L'opérateur Carte applique une fonction de votre choix à chaque élément émis par l'Observable source, et renvoie un Observable qui émet les résultats de ces applications de fonctions.

yourOservableCall().map(res=>res.json()).subscribe(data=>console.log(data))

2. Fonction de cartographie d'un tableau

La méthode map() crée un nouveau tableau contenant les résultats de l'appel d'une fonction fournie sur chaque élément de ce tableau.

var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt);

Answer 2

Tout d'abord, depuis RxJs 6, vous devez importer l'opérateur comme ceci :

import { map } from 'rxjs/operators';

Deuxièmement, vous devez utiliser pipe avant map :

ngOnInit() {
    this.monthlyViewService.getMonthlyData().subscribe(res => {
      let data = res.pipe( map(res => res.data) );
      console.log(data);
    })
  }

Answer 3

Ceci est dû au fait que yourObject (res) est de type object. Ce que vous pouvez vérifier en imprimant le fichier res même.

Il dit à juste titre que map() n'existe pas sur Object type. Cependant, il existe sur Array type. Vous pouvez donc faire ce qui suit ( Source ) :

let data = Array.from(yourObject).map(arrayElement => {
  // do stuffs with arrayElement
});

Answer 4

Utilisation res como any type. Dans ce cas, si map existe dans le type de réponse réel, vous n'obtiendrez pas cette erreur, espérons-le.

this.monthlyViewService.getMonthlyData().subscribe((res:any) => {
      let data = res.map((res:any) => res.data);
      console.log(data);
    })

J'espère que cela vous conviendra !

Answer 5

import { Component, OnInit } from '@angular/core';
import {MonthlyViewService} from "../../../monthlyView.service";
import { map } from 'rxjs/operators'
; 

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
  constructor(private  monthlyViewService: MonthlyViewService) {}
  ngOnInit() {
    this.monthlyViewService.getMonthlyData().subscribe(res => {
      let data = res.pipe(map(res =>
      res.data);
      )
      console.log(data);
    })
  }
}

Il y a eu une mise à jour majeure dans l'utilisation des Observables dans rxjs. Les fonctions comme map, catch, etc. doivent maintenant être utilisées comme un pipe et catch devient catchError, etc.

Pour plus d'informations https://www.academind.com/learn/javascript/rxjs-6-what-changed/