テンプレートのイオン/角度チェック値が設定されている場合

Question

私は以下の問題があります。

私はブログ投稿の配列を持っています。その中には写真があり、他には写真がありません。写真があれば最初の写真を表示したい。配列のurl値が設定されているかどうかは誰が確認できますか？

<ion-header> 
    <ion-navbar> 
    <ion-title>Blogposts</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
    <ion-list> 
    <ion-item *ngFor="let post of posts"> 
    <ion-card> 
     <img [src]="post.photos[0].original_size.url"/> 
     <ion-card-content> 
     <ion-card-title> 
     </ion-card-title> 
      {{post.summary}} 
     </ion-card-content> 
    </ion-card> 
    </ion-item> 
</ion-list> 
</ion-content> 

Answer 1

あなたが結果を得るための非同期要求を作っているので、ポストが定義されているかどうかを確認するために*ngIfsafe navigation operatorとphotos.lengthとを追加することができます。

<ion-item *ngFor="let post of posts"> 
     <ion-card *ngIf="post?.photos?.length > 0"> 
      <img [src]="post?.photos[0]?.original_size.url"/> 
      <ion-card-content> 
      <ion-card-title> 
      </ion-card-title> 
       {{post.summary}} 
      </ion-card-content> 
     </ion-card> 
     </ion-item> 

Answer 2

あなたは*ngIfを使用してletを使用してプロパティを割り当てることができます。私はまた、クラッシュを防ぐために実在の演算子を組み合わせます：

<img *ngIf="post?.photos[0]?.original_size?.url; let url" [src]="url">