Ersetzen der Pfeil-Funktion mit anonymer Funktion ergibt Ausnahme

Question

Ich probiere die Anuglar Heroes Tutorial für Typescript aus. Während die Dienste versuchen, aus der folgende Code funktioniert:

getHeroes() { 
    this.heroService.getHeroes().then(heroes => this.heroes = heroes); 
} 

Aber wenn ich die folgenden es codieren ändern funktioniert nicht

getHeroes(){ 
    this.heroService.getHeroes().then(function (heroes:Hero[]) { 
     this.heroes = heroes; 
    }) 
} 

ich die folgende Störung erhalte:

Unhandled Promise rejection: this is null ; Zone: angular ; Task: Promise.then ; Value: TypeError: this is null
this.heroes = heroes;

Ich habe Helden innerhalb der Klasse definiert als

heroes: Hero[]; 

Answer 1

Das ist, weil Sie den Bereich für this verlieren, wenn Sie eine normale Funktion anstelle der arrow function verwenden.

können Sie die Function.prototype.bind Funktion:

getHeroes(){ 
    this.heroService.getHeroes().then(function (heroes:Hero[]) { 
     this.heroes = heroes; 
    }.bind(this)); 
} 

Wenn Sie das Fett Pfeil Funktion nicht verwenden möchten.

Answer 2

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous. These function expression are best suited for non-method functions.

diese So unten Funktion ist mit dem diesem von dem Rückruf binden functoin

getHeroes(){ 
    this.heroService.getHeroes().then(function (heroes:Hero[]) { 
     this.heroes = heroes; 
    }) 
}