Элементы карты в угловых 6

Question

JSON

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

Компонент

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);
    })
  }
}

В приведенном выше коде я хочу получить доступ к данным, данным календаря из ответа и сохранить их в другоммассив.Я получаю сообщение об ошибке на карте - карта не существует для объекта типа.Любое решение

Answer 1

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);
    })
  }
}

Произошло серьезное обновление в использовании Observables в rxjs.Такие функции, как map, catch и т. Д. Теперь должны быть использованы как pipe и перехватывать изменения в catchError и т. Д.

Для получения более подробной информации https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Answer 2

Используйте res как any тип.Тогда, если map существует в типе фактического ответа, вы, надеюсь, не получите эту ошибку.

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

Надеюсь, это сработает для вас!

Answer 3

1. Оператор карты RxJs

Согласно официальной документации для оператора карты RxJs,

Оператор карты применяет выбранную вами функцию к каждому элементуиспускается источником Observable и возвращает Observable, который испускает результаты этих приложений функций.

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

Функция карты массива

Метод map () создает новый массив с результатами вызова предоставленной функции для каждого элемента в этом массиве.

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

Answer 4

Прежде всего, начиная с RxJs 6, вы должны импортировать оператор следующим образом:

import { map } from 'rxjs/operators';

Во-вторых, вы должны использовать pipe перед map:

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

Answer 5

Это учитывая, что yourObject (res) имеет тип object.Что вы можете проверить, напечатав сам res.

Это справедливо говорит о том, что map() не существует для типа Object.Тем не менее, он существует по типу Array.Таким образом, вы можете сделать следующее ( Source ):

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