隐藏 *ngfor 生成的组件

Question

我对 ionic 和 angular 很陌生，所以我想在这里问一下。有没有办法 hide/remove ngfor 生成的组件？

我的代码会在您单击添加按钮时生成标签和输入

<ion-item *ngFor="let att of anArray; let idx = index">
     <ion-label color="primary">{{att.label}}{{idx+1}}</ion-label>
     <ion-input type="text"  text-right  [(ngModel)]="anArray[idx].value"></ion-input>
 </ion-item>
 <button ion-button   (click)="Add()">Add More</button>

我想做的是当我点击 javascript

中的按钮时删除按钮 "add more" 的所有添加标签和输入

Answer 1

您可以跟踪变量并将其与 *ngIf 一起用于您希望隐藏的项目。当您按下按钮时，您会切换此变量以显示/隐藏所需的元素。

Answer 2

使用 ngIf:

打字稿：

show = true;
  add() {
    //....
    this.show = false;
  }

HTML:

<ion-item *ngFor="let att of anArray; let idx = index">
        <ion-label *ngIf="show" color="primary">{{att.label}}{{idx+1}}</ion-label>
        <ion-input *ngIf="show" type="text" text-right [(ngModel)]="anArray[idx].value"></ion-input>

</ion-item>
<button ion-button (click)="add()">Add More</button>

DEMO

隐藏 *ngfor 生成的组件

Hide components produced by *ngfor

javascript

ngfor

angular