'this' is undefined inside the foreach loop

Question

I am writing some typescript code and iterating an array. Inside the loop, I am trying to access \'this\' object to do some processing as:

console.log(\'befo         


        

Answer 1

Try this:

myarray.days.forEach( (obj) => {
    console.log('before transform, this : ' + this);
    this.datePipe.transform...
});

Answer 2

You need to either use an arrow function:

myarray.days.forEach((obj, index) => {
    console.log('before transform, this : ' + this);
    this.datePipe.transform...
});

Or use the bind method:

myarray.days.forEach(function(obj, index) {
    console.log('before transform, this : ' + this);
    this.datePipe.transform...
}.bind(this));

The reason is that when passing a regular function as a callback, when it is invoked the this is not actually preserved.
The two ways which I mentioned above will make sure that the right this scope is preserved for the future execution of the function.

Answer 3

Add the this as a parameter for callback.

Adding }, this); instead of }.bind(this)); should resolved issue in Angular.

Thus, should look like:

myarray.days.forEach(function(obj, index) {
    console.log('before transform, this : ' + this);
    this.datePipe.transform...
}, this);