Question

我对离子和角度很新，所以我想在这里问一下。有没有办法隐藏/删除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中的按钮时，我想要删除所有添加的标签和“添加更多”按钮的输入

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生成的组件

2 个答案: