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

您可以使用 *ngIf 添加 photos.length 以及 safe navigation operator 来检查帖子由于您正在进行异步请求以获得结果，因此已定义。

 <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">

如果设置了模板中的离子/角度检查值

2 个答案: