时间戳

首页 > 解决方案 > 如何在 ionic html 页面中编写 if/else？

html - 如何在 ionic html 页面中编写 if/else？

问题描述

我制作了一个 Ionic WordPress 应用程序，每次发布没有特色照片的帖子时都会给我一个错误。
我想要做的是过滤掉那些没有照片但我不知道如何在 Ionic中使用if/else条件的帖子。
这是home.html的代码

<ion-card *ngFor="let item of items">
    <img src="{{item._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url}}"/>
    <ion-card-content>
    ...
    </ion-card-content>
</ion-card>

标签： htmlionic-framework

解决方案

如果您尝试从items没有缩略图的项目中删除，最好在获得它们时在后端进行。

this.items = this.items.filter(function(item) {
  return (item && 
          item._embedded &&
          item._embedded['wp:featuredmedia'] &&
          item._embedded['wp:featuredmedia'][0] &&
          item._embedded['wp:featuredmedia'][0].media_details &&
          item._embedded['wp:featuredmedia'][0].media_details.sizes &&
          item._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail &&
          item._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url);
});

如果您想获取每个项目，无论是否有缩略图，但如果缩略图不存在则隐藏缩略图，*ngIf请在您的img标签上使用。

<ion-card *ngFor="let item of items">
  <img *ngIf="item && 
              item._embedded &&
              item._embedded['wp:featuredmedia'] &&
              item._embedded['wp:featuredmedia'][0] &&
              item._embedded['wp:featuredmedia'][0].media_details &&
              item._embedded['wp:featuredmedia'][0].media_details.sizes &&
              item._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail &&
              item._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url"
       src="{{item._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url}}"/>
</ion-card>

注意：您应该检查对象的每一层的原因是因为如果缺少其中任何一层，您将收到 TypeError 说“找不到未定义的属性 X”。

推荐阅读