Typescript/Angular2 TypeError: Cannot read property of undefined

Question

Ang2 Component:

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() {

  }

}

I'm trying to push items into an array but I keep getting the following error:

TypeError: Cannot read property 'labels' of undefined

The error occurs towards the bottom where this line of code is being run:

this.labels.push(snapshot.movement);

I've been playing with this for hours and can't figure out what I'm doing wrong, any help is appreciated.

Answer 1

The issues is that this changes inside callback functions. You can fix this by using arrow functions which will capture the correct this:

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

Or by capturing the this in another variable:

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

This might be useful: What is 'this' in TypeScript