Angular 2 更改事件 - 模型更改答案

【问题标题】：Angular 2 change event - model changesAngular 2 更改事件 - 模型更改
【发布时间】：2016-07-09 02:05:54
【问题描述】：

模型更改后如何获取值？ (change) 事件在模型更改之前触发。我不想使用event.target.value

<input type="checkbox"  (change)="mychange(event)" [(ngModel)]="mymodel">

public mychange(event)
{
   console.log(mymodel); // mymodel has the value before the change
}

【问题讨论】：

Angular 2 not giving current state of checkbox的可能重复

标签： angular

【解决方案1】：

这是一个已知问题。目前，您必须使用问题中所示的解决方法。

这是按预期工作的。当ngModelChange 发出更改事件时（[(ngModel)] 的(...) 部分尚未更新绑定模型：

<input type="checkbox"  (ngModelChange)="myModel=$event" [ngModel]="mymodel">

另见

【讨论】：

请注意，Gunter 使用括在括号中的 (ngModelChange)——而不仅仅是 ngModelChange
太糟糕了，ngModelChange 现在已被弃用。 Check it here
这只是来自FormControlName 指令github.com/angular/angular/blob/master/packages/forms/src/… 的一个属性来自NgModel 的ngModelChange 未被弃用github.com/angular/angular/blob/master/packages/forms/src/…
@MTZ 我认为ngModelChange 仅在响应式表单中被弃用，而不在模板驱动表单中被弃用。
我通常使用的解决方法是 setTimeout(()=>{ ... read updated model...},0)

【解决方案2】：

如果这对你有帮助，

<input type="checkbox"  (ngModelChange)="mychange($event)" [ngModel]="mymodel">

mychange(val)
{
   console.log(val); // updated value
}

【讨论】：

这个答案很有帮助，但我可以理解为什么选择 Gunter 的答案，因为他指出 (change) 是不同的，正如他在 github 问题中所说的那样； “click 是一个 DOM 事件，与更高级别的 ngModel 无关。适合的事件是 ngModelChange。”

【解决方案3】：

这对我有用

<input 
  (input)="$event.target.value = toSnakeCase($event.target.value)"
  [(ngModel)]="table.name" />

在打字稿中

toSnakeCase(value: string) {
  if (value) {
    return value.toLowerCase().replace(/[\W_]+/g, "");
  }
}

【讨论】：

【解决方案4】：

使用(ngModelChange) 事件检测模型的变化

【讨论】：