Typescript / Angular2 TypeError：无法读取未定义属性

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

我已经花了几个小时尝试，但无法弄清楚我的问题出在哪里，非常感谢您的帮助。

- Joe Berthelot

Answer 1

问题在于回调函数中的this会发生变化。您可以通过使用箭头函数来解决这个问题，这将捕获正确的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);
});

这可能会有帮助：TypeScript中的'this'是什么。

- Saravana