在 angular2 中重置 ngIf 上的 ngModel 值答案

【问题标题】：Reset ngModel values on ngIf in angular2在 angular2 中重置 ngIf 上的 ngModel 值
【发布时间】：2017-09-25 06:26:45
【问题描述】：

我有一个模型，它是一个数组元素。我想清除 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>

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

任何帮助将不胜感激！

【问题讨论】：

flag 的值什么时候会发生变化？在什么情况下会发生变化？
实际上，没有事件，我将标志变量绑定到单选按钮作为 ngmodel。在更改单选按钮时，我正在显示内容
谢谢。 . . .. .

标签： angular angular2-template angular2-forms angular2-services

【解决方案1】：

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


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

【讨论】：

【解决方案2】：

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

这是您还想清除集合的方法调用。

类似这样的：

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

【讨论】：

实际上，没有事件，我将 flag 变量绑定到单选按钮作为 ngmodel。在更改单选按钮时，我正在显示内容

【解决方案3】：

在您的组件中：

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

你必须像这样实现DoCheck：

export class myClass implements OnInit, DoCheck {

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

【讨论】：

它有效，但 ngDoCheck 被多次调用，所以我选择了（更改）事件
@JayakrishnanGounder 哦，好的。无论如何，我很高兴这有帮助.. ;) 祝你有美好的一天！

【解决方案4】：

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

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

我的情况比较复杂，所以我在Angular 2+ - Set ngModel to null when ngIf causes hide问了一个类似的问题

【讨论】：

【解决方案5】：

针对我的情况，我想出了一个同样适用于这个情况的解决方案。以下项目有一个绑定到 ngModel 的指令，并使用该指令的 OnDestroy 事件触发将 ngModel 设置为 null。可以修改它以将值设置为任何值，或者您可以创建一个将数组设置为空的变体。

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

【讨论】：