如何使用ngFor ionic隐藏未使用的物品? [英] How to hide unused items with ngFor ionic?

问题描述

im试图从ngFor中隐藏未使用的项目，问题是，我确实成功隐藏了它，但是它的位置仍然存在并且像下面的图像一样为空:

im trying to hide unused items from ngFor, the problem is, i did hide it successfully but its place still exists and empty like the image below:

我的ts文件:

coupon: any;
  couponz() {
    var data=[];
    for (let co of this.shared.couponz){
    data.push({ code: co.code, coEmail: co.email_restrictions[0], expiry: co.date_expires });
    this.coupon = data;
    console.log(this.coupon)
    }return data
  }

我的数据提供者:

@Injectable()
export class SharedDataProvider {

  public couponz;

this.config.Woocommerce.getAsync("coupons/").then((data) => {
  this.couponz = JSON.parse(data.body);
});

我的html:

  <ion-list padding>
    <ion-item *ngFor="let c of coupon; trackBy: trackElement"> 
      <div *ngIf="c.coEmail == shared.customerData.email">
      {{c.expiry}}
      {{c.code}}
      </div>
      </ion-item>
  </ion-list>

推荐答案

两个选项:

将模板重构为以下内容:

Refactor the template into the following:

<ion-list padding>
  <ng-container *ngFor="let c of coupon; trackBy: trackElement">
    <ion-item *ngIf="c.coEmail == shared.customerData.email">
      <div >
        {{c.expiry}}
        {{c.code}}
      </div>
     </ion-item>
  </ng-container>
 </ion-list>

或将列表中已过滤的元素存储在组件的另一个实例成员中:

Or store the filtered elements of the list in another instance member of the component:

this.filteredCoupons = this.coupons.filter(c => c.coEmail == this.shared.customerData.email)

<ion-list padding>
    <ion-item *ngFor="let c of filteredCoupons; trackBy: trackElement"> 
      <div>
      {{c.expiry}}
      {{c.code}}
      </div>
     </ion-item>
  </ion-list>

这篇关于如何使用ngFor ionic隐藏未使用的物品?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！