javascript - Typescript/Angular2 类型错误 : Cannot read property of undefined

Question

Ang2 组件:

import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import Chart from 'chart.js'

@Component({
  selector: 'app-prchart',
  templateUrl: './app-prchart.component.html',
  styleUrls: ['./app-prchart.component.css']
})
export class AppPRChartComponent implements OnInit {
  userEmail: any;
  email: string;
  uid: any;
  records = [];
  newRecords = [];
  filteredRecords = [];
  labels = [];

  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true,
    legend: {
        display: false
     }
  };
  public barChartColors: any [] =[
    {
        backgroundColor:'rgba(30, 136, 229, 1)'
    }
  ];

  public barChartType:string = 'bar';

  constructor(public af: AngularFire) {
    var auth = this.af.auth.subscribe( (user) => {
      if (user) {


        this.userEmail = this.af.auth.subscribe(auth => {
          const queryObservable = af.database.list('/users/'+ auth.auth.uid +'/records/', {
          });
          queryObservable.subscribe(queriedItems => {
            this.records.push(queriedItems);
          });

          // Filter records into PR's
          this.newRecords =
          this.records[0].sort((a, b) => {
            if (a.movement === b.movement) {
              return a.weight >= b.weight ? -1 : 1
            }
            return a.movement > b.movement ? 1 : -1
          })
          .filter((rec, i, arr) => {
            if (i === 0) return true
            return rec.movement !== arr[i - 1].movement
          });
          let recordString = JSON.stringify(this.newRecords);
          let recordParse = JSON.parse(recordString);
          this.filteredRecords.push(recordParse);
        });
      } else {
      }
    });

    this.filteredRecords[0].forEach(function(snapshot) {
        this.labels.push(snapshot.movement);
        //barChartData.push(snapshot.weight);
    });
    //console.log(barChartLabels);
    //console.log(barChartData);
  }

  ngOnInit() {

  }

}

我试图将项目插入数组，但我不断收到以下错误:

TypeError: Cannot read property 'labels' of undefined

错误发生在运行这行代码的底部:

this.labels.push(snapshot.movement);

我已经玩了好几个小时了，无法弄清楚我做错了什么，感谢任何帮助。

Answer 1

问题是 this 在回调函数中发生了变化。您可以使用 arrow functions 解决此问题这将捕获正确的 this:

this.filteredRecords[0].forEach((snapshot) => {
    this.labels.push(snapshot.movement);
    //barChartData.push(snapshot.weight);
});

或者通过在另一个变量中捕获 this:

let that = this;
this.filteredRecords[0].forEach(function (snapshot) {
    that.labels.push(snapshot.movement);
    //barChartData.push(snapshot.weight);
});

这可能有用:What is 'this' in TypeScript