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

Question

我正在使用 angular 8 创建离子应用程序，我尝试显示 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 是否被评估为 true，<ion-slide> 都会显示带有空内容的渲染。您可以使用<ng-container> 上的*ngFor 来循环浏览这些项目。然后将*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');
}