miholzi miholzi - 15 days ago 6
TypeScript Question

Angular2 subscribe understand arrow function

I try to understand arrow functions of typescript by the example of Angular 2 Observable subscribe method. Could somebody explain me:

I have this code which works:

this.readdataservice.getPost().subscribe(
posts => { this.posts = posts; }
);


but should it be the same if I use this? But this doesn't work.

this.readdataservice.getPost().subscribe(
function (posts) {
this.posts = posts;
}

);

Answer

JS by default executes functions in the scope of the caller. If you pass a function around to be called somewhere else, this points to the caller. In your code you pass the function to the observable via the subscribe(...) method and then the function is called by the observable when an event is to be emitted.

If you use arrow function, then this keeps pointing to the class where it is defined.

An alternative is using .bind(this) to tell JS this should keep pointing at the current class instance.

    this.readdataservice.getPost().subscribe(
        function (posts) {
            this.posts = posts;
        }.bind(this)

    );

See also https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions