Question

我有一个数组元素的模型。我想在ngIf条件下清除每个元素的值。请在下面找到HTML：

         <div *ngIf="flag" >
            <table id="table" class="table table-hover table-bordered  table-mc-light-blue">
               <thead>
                   <tr>
                       <th>col 1</th>
                       <th>col 2</th>
                   </tr>
                </thead>
                <tr *ngFor="let item of collection;">
                     <td>{{item.col1}}</td>
                     <td>
                        <input type="text" class="form-control" [(ngModel)]="item.col2" #input="ngModel" name="input-{{i}}">
                     </td>
                 </tr>
             </table>
         </div>

在标记设置为false时，我想清除集合的所有值。有一个初始化集合的选项，但我不想那样做，因为我有几个这样的集合。

任何帮助都会很明显!!

Answer 1

<input type="radio" (change)="resetForm()"/>


resetForm(){
     if(!this.flag){
          this.collection = new Array()
     }
}

Answer 2

什么是导致标志设置为false的“事件”或方法调用？

这是方法调用，您还需要清除该集合。

这样的事情：

public toggleFlag() {
  this.expandFlag = !this.expandFlag;
  this.collection = [];
}

Answer 3

在您的组件中：

ngDoCheck() {
    if (!this.flag) {
        this.collection = [];
    }
}

你必须像这样实施DoCheck：

export class myClass implements OnInit, DoCheck {

基本上，这是一个在每次发生的更改时触发的侦听器，在这里我们检查this.flag是否为false并清空collection数组元素。

Answer 4

对于您的简单示例，如果将表转换为组件，则可以使用OnDestroy生命周期事件来清除该组件的模型值。

ngOnDestroy() {this.collection = [];}

我遇到的情况更加复杂，因此我在Angular 2+ - Set ngModel to null when ngIf causes hide询问了类似的问题

Answer 5

我针对自己的情况提出了一种解决方案，该解决方案也适用于此情况。以下项目具有绑定到ngModel的指令，并使用该指令的OnDestroy事件触发将ngModel设置为null。可以对其进行修改以将其值设置为任何值，或者可以创建一个变体来将数组设置为空。

https://stackblitz.com/edit/angular-4uwdmi?file=src%2Fapp%2Fapp.component.html

在angular2中重置ngIf上的ngModel值

5 个答案: