Question

我想将chart.js实现到我的angular 4项目中。我将从json文件中获取数据，然后我将它们放入graphe。当我编译我的代码时一切都很好但是当我从chrome打开t时我得到了一个错误无法阅读未经分割的proprerty'map'。有人可以帮我解决这个问题，并说出这个错误的原因。这是我的代码app.component.ts：

import {Component, OnInit} from '@angular/core';
import {trigger, state, style, transition, animate, keyframes} from 
'@angular/animations';
import { Chart } from 'chart.js';
import { WeatherService } from './weather.service';
import 'rxjs/add/operator/map';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('myAnimation', [
state('small', style({transform: 'scale(1)', })),
state('large', style({transform: 'scale(2)', })),
  // transition('small <=> large', animate('500ms ease-in' , style 

 ({transform : ' translateY(40px)'}))),
  transition('small <=> large', animate('700ms ease-in' , keyframes([

    style ( { opacity: 0, transform : ' translateY(-75%)' , offset: 0})
    //style ( { opacity: 1, transform : ' translateY(400px)', offset : 
  0.5}),
  //  style ( { opacity: 1, transform : ' translateY(0)', offset : 1})


  ]))),
 ]),

 ]
 })
export class AppComponent implements OnInit {
 state: String = 'small';
 chart = [];
 temp_max = [ ];
 temp_min = [ ];

 constructor(private weather: WeatherService) {}
 ngOnInit() {
this.weather.dailyForecast()
  .subscribe(res => {
    let temp_min = res['list'];
    let temp_max = res['list'];
    let alldates = res['list'];
     temp_min.map(res => res.main.temp_max)
   temp_max.map(res => res.main.temp_min)
    alldates.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'}))
      })

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

  });
 }

Answer 1

您需要检查res ['list']是否返回数组。 Javascript .map方法与'rxjs / add / operator / map';

不同

错误TypeError：无法读取未定义角度4的属性“map”

1 个答案: