无法读取未定义的属性'map'。ANGULAR-CHARTJS

Question

这是app.component.ts

import { Component } from '@angular/core';
import { GraficaService } from './services/grafica.service'
import { Chart } from 'chart.js';




@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'yoga';
  chart = [];

  constructor( private _grafica: GraficaService){}

  ngOnInit(){
    this._grafica.graficoEstadistico()
     .subscribe(res => {

        let temp_max = res['list'].map(res => res.main.temp_max)
        let temp_min = res['list'].map(res => res.main.temp_min)
        let alldates = res['list'].map(res => res.dt)

        let weatherDates = []

        alldates.forEach((res) => {
          let jsdate = new Date(res * 1000)
          weatherDates.push(jsdate.toLocaleTimeString('en'), {year: 'numeric', month:'short',day:'numeric'})         
        });

        console.log(weatherDates);

        this.chart = new Chart('canvas',{
          type: 'line',
          data: {
            labels: weatherDates,
            datasets: [
              {
                data: temp_max,
                borderColor: '#3cba9f',
                fill:false

              },
              {
                data: temp_min,
                borderColor: '#ffcc00',
                fill:false

              },
            ]
          },

          options: {
            legend:{
              display:false
            },
            scales:{
              xAxes:[{
                display: true
              }],
              yAxes:[{
                display: true
              }]
            }
          }
        })


     })


    // Yo puedo presentar mi json por consola ,asi . De manera continuada al this
    //.subscribe(res => console.log(res))

  }
}

我当前在ANGULAR项目中使用“ chartjs”库来生成统计图，但是在控制台中运行项目时出现以下错误：错误TypeError：无法读取未定义的属性“ map”，有什么解决方案？

core.js：15714错误TypeError：无法读取未定义的属性'map'在SafeSubscriber._next（app.component.ts：22）在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub（Subscriber.js：196）在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber.next（Subscriber.js：134）在Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._next（Subscriber.js：77）在Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next（Subscriber.js：54）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operators / map.js.MapSubscriber._next（map.js：41）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next（Subscriber.js：54）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operators / map.js.MapSubscriber._next（map.js：41）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next（Subscriber.js：54）在FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operators / filter.js.FilterSubscriber._next（filter.js：38）

Answer 1

您使用map函数的唯一位置是在res['list']之后，当您获得res时，上面没有list属性。

调查console.log(res)开头的subscribe，并观察其中的内容。

此外，注释还避免使用阴影变量（地图和函数中的res），因此您可以将其更改为

之前> res['list'].map(res => res.main.temp_max)

之后> res['list'].map(r => r.main.temp_max)

以及另一个改进> res.list.map(r => r.main.temp_max)