如何使用 Angular 2 中的按钮触发 ngModelChange答案

【问题标题】：How to trigger ngModelChange with a button in Angular 2如何使用 Angular 2 中的按钮触发 ngModelChange
【发布时间】：2017-12-09 16:21:28
【问题描述】：

我使用*ngFor 来填充我的表格。

<tr *ngFor= "stu in students">
<td>{{stu.name}}</td>
<td><input type="checkbox" ngModel="isChecked" 
(ngModelChange)="addID(stu.id)</td>
</tr>

然后我在桌子外面有一个按钮。

<button (click)="selectAllID()">select all</button>

然后我的组件为：

studentID=[];
isChecked=false;

addID(id:number){
this.student.push (id);
//I do other thing with id
}

selectAllID (){
 If (this.isChecked)
     this isChecked = false;
  else this isChecked = true
}

问题是：

如果我选中单个复选框，则会执行 addID() 函数。但是，如果我单击全选按钮，则会选中复选框。但是addID()函数没有被调用。

当我使用全选按钮时，如何触发ngModelChange 函数，以便我选择所有id's

【问题讨论】：

在 ngModel 上使用括号作为 [ngModel]="isChecked"

标签： html angular forms checkbox

【解决方案1】：

输入控件与ngModelChange 指令的绑定只有一种方式。但是要更新视图，您应该将控件绑定到ngModel。

<input type="checkbox" [ngModel]="isChecked" 
(ngModelChange)="addID(stu.id)">

【讨论】：

谢谢。我添加了 [ ]。复选框按钮被选中，但 [ngModelChange] 没有被触发。
当你改变ngModel的值时它会被触发。

【解决方案2】：

谢谢大家。我终于解决了这个问题。这就是我所做的：

我使用 selectAll() 函数将所有 id（我从加载我的表的源获得的这个 id）自动加载到一个数组中。和我将 isChecked 的值设置为 true 或 false。

【讨论】：