我正在创建角度为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中,我的意思是这样。

这是图像

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

===============>>#1 票数: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'); } 

  ask by naoval translate from so

本文未有回复,本站智能推荐: