角度2、お約束

Question

私はヒーローアプリでAngular 2チュートリアルをやっています。私はチュートリアルのHttp部分にあります。 （link）

hero.service.ts

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

そして、私はなく、以下heroes.components.tsで返されたデータを使用しようとしている中に、以下の方法を使用してサーバーへの呼び出しがあります私はthen関数を正しく実装することができません。私はthis.heroesとタイトルをCONSOLE.LOGすることはできませんなぜあなたは知っています。このコンソールエラーに

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(); 
} 

を取得していますか？

Answer 1

スコープの競合を避けるために太い矢印の表記を検討するとよいでしょう。あなたのケースでは、はクラスインスタンスを指しておらず、約束のsucesscallbackを指しています。

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

あなたはおそらくいくつかのスコープの問題に遭遇しています...これはあなたが考えると思われるものではありません。このようsomehtingを試してみてください。

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

それはスコープの問題の多くがありますで、活字体スコープの問題だときラムダ関数で、あなたのケースでは、jqueryの、または他のJavaScriptのAPIにコードを渡すと。

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); 
    }) 

} 

非常に重要な注意： をそれは予約キーワードなので、あなたの範囲を保存するために _this を使用しないでください変数にスコープを保存にあなたが必要とする問題を解決するために Typescriptで同じことをするのに使用されますが、自動的にコメントされた場合にはうまくいきません。

Answer 4

ありがとうございました。スコープの問題でした。

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.

太い矢印表記を使用して問題を解決しました。