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

Question

i'm create ionic apps with angular 8, i try to display datas from json file and filter it with ngif in home.page.html, here's my code

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

and here's the 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"
    }
]

but now i have problem, list of data that i have filtered, they don't display but they still showing up in html, i mean like this.

here's the image

i mark the data that showing up in html they don't display. how to solve this

Answer 1

The issue is that you're looping on the <ion-slide> so regardless of whether or not the *ngIf is evaluated to true, the <ion-slide> will display render with empty content. You can use the *ngFor on an <ng-container> to loop through the items. Then add the *ngIf to the <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/

---

Another option is to filter the items by calling a method in you ts file.

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');
}