时间戳

首页 > 解决方案 > 无法读取 undefined.ANGULAR-CHARTJS 的属性“地图”

angular - 无法读取 undefined.ANGULAR-CHARTJS 的属性“地图”

问题描述

这是 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”库来生成统计图，但是在控制台中运行项目时出现以下错误：错误类型错误：无法读取未定义的属性“地图”，有什么可以解决的?

core.js:15714 错误类型错误：无法在 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/内部/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 (订阅者。 js:54) 在 FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)

标签： angularcharts

解决方案

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)

推荐阅读