JSONデータをIonic 2/AngluarJSで表示しますか？

Question

私はAngularJS/Ionic 2を使用してAPIデータを取得しています。私はthisガイドをフォローし、home.htmlに行くときにデータを適切に記録するようにしました。しかし、実際にhome.htmlにデータを表示しようとすると、動作させることができません。

データ-provider.ts：

getRemoteData(){ 

this.http.get('https://api.example.com/?limit=10').map(res => res.json()).subscribe(data => { 
    console.log(data); 
}); 

}

home.ts：私が試した

[ 
    { 
     "id": "a", 
     "name": "ExampleA", 
     "price": "10" 
    }, 
    { 
     "id": "b", 
     "name": "ExampleB", 
     "price": "15" 
    } 
] 

：

ionViewDidLoad(){ 
    this.dataService.getRemoteData(); 
    } 

は、これは正しくJSONデータを記録しますdaを記録する代わりにデータを返すTA、その後、Can't read property '0' of undefined

Answer 1

2点をhome.ts内の変数data: any;を作成し、<p> data[0].name </p>としてhome.htmlにデータを出力するが、私はエラーメッセージを取得保管：あなたはへの要求から値を代入するか持っていますコンポーネントのプロパティとテンプレート内のこのプロパティが割り当てられるのを待ちます。

あなたのサービス/プロバイダが（のみ）でなければなりません：

getRemoteData(){ 

    return this.http.get('https://api.example.com/?limit=10') 
    .map(res => res.json()); 
} 

あなたがそれで、観察に加入するべきではありません。前に述べたように、テンプレート内

ionViewDidLoad(){ 
    this.dataService.getRemoteData().subcribe(response => this.data = response); 
} 

「データ」は存在するかどうかを確認：コンポーネントでこれを行う

<p *ngIf="data">data[0].name </p>