angular, cannot read property 'fruits' of undefined

Question

In angular, I get the error: cannot read property "fruits" of undefined. In my class I have:

export class myClass implements OnInit {

fruits: any[];

doSomething() {
this.myArray.forEach(function(m) {
  const my = { test: true };
  this.fruits.push(my);
  }
}

I may have different types that I want to add to my array, so I did not define an interface. What is causing this?

Answer 1

If you want to access this, you should use arrow functions:

fruits: any[] = [];

doSomething() {
  this.myArray.forEach(m => {
    const my = { test: true };
    this.fruits.push(my);
  }
}

Arrow functions will cause it to be lexically bounded, allowing you to access this from the object context itself(the 'outer' scope). Read more about it here .

Answer 2

You must initialize the fruits

export class myClass implements OnInit {

    public myArray: string[] = ['banana', 'Apple, 'Kumquat']
    public fruits: {test: boolean}[] = [];

    constructor() {}

    ngOnInit() {}

    public doSomething(): void {

      let my: any = {}; 

      this.myArray.forEach( m => {
        my = { test: true };
        this.fruits.push(my);
      });
    }
}