javascript - 使用ngif ionic4过滤ngfor中的json数据

Question

我正在创建 Angular 为 8 的 ionic 应用程序，我尝试显示来自 json 文件的数据并在 home.page.html 中使用 ngif 对其进行过滤，这是我的代码

<ion-slides class="links_slide" [options]="sliderConfig">
<ion-slide *ngFor="let item of items">
  <div *ngIf="item.status === 'marketplace'">
    <ion-card class="list-container" (click)='webview()' [style.backgroundImage]="'url('+item.iconlink+')'">
    </ion-card>
    <ion-card-title class="label">{{ item.name }}</ion-card-title>
  </div>
</ion-slide>

这是json

[
    {
        "id": "0",
        "status":"marketplace",
        "name": "Webstore",
        "link": "https://youthscarf.com",
        "iconlink": "http://atmoweb.id/wp-content/uploads/2019/10/ysweb.jpg"
    }
    {
        "id": "6",
        "status":"oa",
        "name": "Instagram Signature",
        "link": "https://instagram.com/youthcatalog_id/",
        "iconlink": "http://atmoweb.id/wp-content/uploads/2019/10/listdummy.jpg"
    }
]

但现在我遇到了问题，我过滤的数据列表没有显示，但它们仍然以 html 格式显示，我的意思是这样。

here's the image

我标记在 html 中显示的数据，它们不显示。如何解决这个问题

Answer 1

问题是您在 <ion-slide> 上循环所以不管有没有*ngIf被评估为真，<ion-slide>将显示内容为空的渲染。您可以使用 *ngFor在 <ng-container> 上循环遍历项目。然后添加 *ngIf到 <ion-slide> .

<ng-container *ngFor="let item of items">
  <ion-slide *ngIf="item.status === 'marketplace'">
    <div >
      ...
    </div>
  </ion-slide>
</ng-container>

https://alligator.io/angular/ng-container-element/

---

另一种选择是通过调用 ts 文件中的方法来过滤项目。

items-list.component.html

<ion-slide *ngFor="let item of getMarketplaceItems(items)">
  <div >
    ...
  </div>
</ion-slide>

items-list.component.ts

getMarketplaceItems(items) {
  return items.filter(item => item.status === 'marketplace');
}