IonicのJSONからデータを抽出します。

Question

Ionicフレームワークを新たに試してみました。私は現在、ムービーレビューAPIをthisで使用して映画レビューアプリを作成しようとしています。

JSONを正常に取得できましたが、データを抽出できませんでした。

コントローラーコード：

constructor(public navCtrl: NavController, public http: Http) { 
this.http.get('https://api.nytimes.com/svc/movies/v2/reviews/all.json?api-key=a96736504fda41f58b3af1ec5876d3b9') 
    .map(res => res.json()) 
    .subscribe(data => { 
    this.posts = data.results; 
    }); 
} 

HTMLコード：

<ion-content> 
    <ion-list> 
    <ion-item ng-repeat = "post in posts"> 
     {{post.display_title}} 
    </ion-item> 
    </ion-list> 
</ion-content> 

私はエラー

Cannot read property 'display_title' of undefined.

を得る。しかしdisplay_titleのためのフィールドがあります。どこが間違っていますか？

Answer 1

@CozyAzureはこのラインでは、と言うだけのように：

{{ post.display_title }} 

ビューがない持っているもののdisplay_titleにアクセスしようとしていますまだ設定されていません（非同期メソッドが準備完了のときに設定されているため）。

<ion-content> 
    <ion-list> 
    <ion-item *ngFor= "let post of posts"> 
     {{post?.display_title}} 
    </ion-item> 
    </ion-list> 
</ion-content> 

してください：それはpostがnullの場合display_titleプロパティを読み取ろうとしないことを、角度のノウハウをできるようにエルビス演算子を使用し、したがって、最初の

Cannot read property 'display_title' of undefined.

：あなたは次のエラーを取得する理由ですngForループの適切sintaxが

*ngFor= "let post of posts">

あることに注意してくださいそしてない

*ngFor= "let post for posts">

そしてまた、あなたのビュー（ng-repeat = "post in posts"）でAngularJsを使用しようとしたが、イオン2/3（あるいは単にイオン）が角の上に構築されているので、見つけることthese docsを参照していることに気づきますforループのようなことをする方法についての情報

Answer 2

これは、データが非同期で取得されるためです。あなたのDOMがロードされると、データはまだ戻っていないので、postsは空であり、あなたは未定義になります。

また、*ngForを使用します。

問題を解決するために、エルビス演算子を使用します。

<ion-content> 
    <ion-list> 
    <ion-item *ngFor= "let post of posts"> 
     {{post?.display_title}} 
    </ion-item> 
    </ion-list> 
</ion-content> 

またはasyncパイプを使用します。

<ion-content> 
    <ion-list> 
    <ion-item *ngFor= "let post of posts | async"> 
     {{post.display_title}} 
    </ion-item> 
    </ion-list> 
</ion-content>