角度2のクラスメソッド内でajaxデータにアクセスする方法

Question

httpコールを作成して応答を取得し、ブロック内のデータにアクセスすることができます1。私はブロック1の外で使用することはできません。それは未定義と言います。ブロック1の外で応答データを使用するにはどうすればよいですか？

this._demoService.get('/app/food.json').subscribe(
data => { //block1 
      this.foods = data; 
      console.log(data); 
     }, 

    err => { 
    console.log('error '+err.status); 
    console.log('success'); 

}, 
() => console.log('done loading ') 
); 
//block2 

Answer 1

これは正常な動作です。 block1は、サーバーからのデータが到着したときに実行されますが、時間がかかることがあります。

block2が直ちに実行されます。この時点で、サーバーへの要求は開始されていませんでした。

データが到着した後で実行する場合は、コードをblock1内に移動する必要があります。

Answer 2

データが非同期で受信されたため、this._demoService.getブロックの直後にデータにアクセスすることはできません。私は後者を意味するので、getメソッドがデータを返すときは、そこにはありません。

Angular2は、このような場合を処理するための非同期パイプを提供します。データの代わりにobservableをclassプロパティに設定する必要があります。

this.foods = this._demoService.get('/app/food.json'); 

とテンプレートで、あなたは使用することができます。

<div *ngFor="let food of foods | async"> 
    {{food.name}} 
</div>