隐藏 *ngfor 生成的组件答案

【问题标题】：Hide components produced by *ngfor隐藏 *ngfor 生成的组件
【发布时间】：2018-03-07 09:33:07
【问题描述】：

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

【问题讨论】：

您可以使用*ngIf来显示和隐藏项目
你能展示一下它是怎么做的吗？我知道 *ngIf 可以使用，但它已附加到组件中，对吗？如何将它附加到尚未存在的组件上？？

标签： javascript angular ngfor

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：