bugfix> javascript > 投稿

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

上記のコードでは、応答データからカレンダーデータにアクセスし、別の配列に保存します。マップでエラーが発生しています-タイプオブジェクトにマップが存在しません。 あらゆる解決策

回答 5 件
  • まず、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);
        })
      }
    
    

  • RxJsのマップオペレーター

    RxJsのマップオペレーターの公式ドキュメントによると、

    The Map operator applies a function of your choosing to each item emitted by the source Observable, and returns an Observable that emits the results of these function applications.

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

    配列のマップ関数

    map() method creates a new array with the results of calling a provided function on every element in this array.

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

  • これは、yourObject(res)がオブジェクト型であることを考慮しています。 res を印刷して確認できます  自体。

    それは当然 map() と言います   Object には存在しません  タイプ。ただし、 Array には存在します  タイプ。したがって、次のことが可能です(ソース):

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

  • res を使用する  として any  タイプ。その後、 map  実際の応答のタイプには存在しないので、うまくいけばそのエラーは表示されません。

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

    これがあなたのために働くことを願っています!

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

    rxjsのObservablesの使用に大きな更新がありました。 map、catchなどの関数はパイプで使用し、catchErrorなどへの変更をキャッチする必要があります。

    詳細については https://www.academind.com/learn/javascript/rxjs-6-what-c​​hanged/

あなたの答え