Angular 2 dann versprechen

Question

Ich mache das Angular 2 Tutorial mit der Hero App. Ich bin im Http Teil des Tutorials. (link)

Es gibt einen Aufruf an den Server mit dem folgenden Verfahren in hero.service.ts

getHeroes(): Promise<Hero[]> { 
    return this.http.get(this.heroesUrl) 
       .toPromise() 
       .then(response => response.json().data) 
       .catch(this.handleError); 
    } 

Und dann versuche ich, die zurückgegebenen Daten in heroes.components.ts unten zu verwenden, aber Ich bin nicht in der Lage, die then-Funktion korrekt zu implementieren. Ich erhalte diese Konsole Fehler

EXCEPTION: Error: Uncaught (in promise): TypeError: this is null

export class HeroesComponent implements OnInit { 

title = 'Tour of Heroes'; 
heroes: Hero[]; 
selectedHero: Hero; 

constructor(
    private router: Router, 
    private heroService: HeroService) { } 

getHeroes() { 
    this.heroService.getHeroes().then(function(value) { 
     //SUCCESS 
     console.log(value); //this is working 
     this.heroes = value; //this is not working 
     console.log("I am inside then SUCCESS") 
     console.log(title); 
     console.log(this.heroes); 

    }, function(error) { 
     //FAILURE 
     console.log(error); 
    }) 

} 

ngOnInit() { 
    this.getHeroes(); 
} 

Wissen Sie, warum ich nicht this.heroes und Titel console.log können?

Answer 1

Sie möchten vielleicht Fett Pfeil Notation zu vermeiden Bereich Konflikte. In Ihrem Fall zeigt diese nicht auf die Klasseninstanz, sondern auf die Successcallback Ihres Versprechens stattdessen.

getHeroes() { 
    let instance : HeroesComponent = this; 
    this.heroService.getHeroes().then((value) => { 
     //SUCCESS 
     console.log(value); 
     this.heroes = value; 
     console.log("I am inside then SUCCESS") 
     console.log(this.title); 
     console.log(this.heroes); 

    }, (error) => { 
     //FAILURE 
     console.log(error); 
    }) 
} 

Answer 2

Sie geraten wahrscheinlich in einige Probleme mit dem Scoping ... das, was es nachschlägt, ist nicht das, was Sie denken, dass es ist. somehting wie dies versucht:

getHeroes() { 
    let that = this; // use that now in all sub functions 
    this.heroService.getHeroes().then(function(value) { 
     //SUCCESS 
     console.log(value); //this is working 
     this.heroes = value; //this is not working 
     console.log("I am inside then SUCCESS") 
     console.log(that.title); 
     console.log(that.heroes); 

    }, function(error) { 
     //FAILURE 
     console.log(error); 
    }) 

} 

Answer 3

Es ist eine Umfang Ausgabe, in Typoskript gibt es eine Menge Spielraum Probleme, wenn Code jquery vorbei oder anderen Javascript-APIs und in Ihrem Fall mit Lambda-Funktionen. Zur Lösung dieses Problems Sie müssen den Umfang in einer Variablen speichern:

getHeroes() { 
    let instance : HeroesComponent = this; 
    this.heroService.getHeroes().then(function(value) { 
     //SUCCESS 
     console.log(value); //this is working 
     instance.heroes = value; //this now works 
     console.log("I am inside then SUCCESS") 
     console.log(title); 
     console.log(instance.heroes); 

    }, function(error) { 
     //FAILURE 
     console.log(error); 
    }) 

} 

Einen sehr wichtigen Hinweis: nicht _this Verwenden Sie Ihren Umfang zu sparen, weil es ein reserviertes Schlüsselwort ist von Typescript verwendet, um das Gleiche zu tun, aber automatisch, das funktioniert leider nicht in den kommentierten Fällen.

Answer 4

Vielen Dank für Ihre Antworten. Es war ein Problem mit dem Umfang.

You might want to consider fat arrow notation to avoid scope conflicts. In your case, this does not point to the class instance but to the sucesscallback of your promise instead.

Ich benutzte die fette Pfeilnotation und löste das Problem.