템플릿의 이온/각도 검사 값이 설정된 경우

블로그 게시물 배열. 그 중 일부는 사진이 있고 다른 일부는 그렇지 않습니다. 사진이 있으면 첫 번째 사진을 보여주고 싶습니다. 배열의 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>

출처

2017-12-19 Andreas Sauer

당신은 당신이 결과를 얻기 위해 비동기 요청을하기 때문에 게시물이 정의되어 있는지 확인하기 위해 *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>

출처

2017-12-19 17:06:11 Sajeetharan

sry. 작동하지 않습니다 : "정의되지 않은 속성 '길이'를 읽을 수 없습니다. –

업데이트 된 답변 – Sajeetharan

을 확인하십시오. 그것은 작동한다. –

당신은 *ngIf를 사용하고 let를 사용하여 속성을 할당 할 수 있습니다. 또한 실손 연산자를 결합하여 충돌을 방지합니다.

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

출처

2017-12-19 17:10:40

템플릿의 이온/각도 검사 값이 설정된 경우

답변

관련 문제