Angular 2延迟更新组件中的模型答案

【问题标题】：Angular 2 delayed update of model in componentAngular 2延迟更新组件中的模型
【发布时间】：2016-10-27 12:32:23
【问题描述】：

我是 Angular 2 的新手，我最近一直在尝试双向绑定。我有以下代码：

template.html

<select [(ngModel)]="val" (change)="onChanged()">
   <option>1</option>
   <option>2</option>
   <option>1</option>
</select>

component.ts

..//other code definitions here
export class MyComponent{
  val: number = 1; //edited this

  onChanged(){
    console.log(this.val);
  }
}

问题是当下拉列表中选择的值发生变化时，控制台输出的值仍然是之前的值。它只会在我再次选择另一个值后更新，但打印的值仍然是之前选择的值。所以这就像是被一个选择延迟了。

希望任何人都可以提供帮助。

谢谢。

【问题讨论】：

【解决方案1】：

val 值只会在下一个 Angular2 变更检测周期更新。要使用 onChanged 方法中的最新值，请像这样使用 $event 值：

<select [(ngModel)]="val" (change)="onChanged($event)">

在MyComponent:

onChanged(newVal){
  console.log(newVal);
}

【讨论】：

这不是违背了2路绑定的目的吗？在我已经将模型绑定到视图的情况下，我将不得不将我的函数与参数混为一谈。
IMO 它没有。 2-way 数据绑定仍被保留（如最终更新父组件中的值）。您需要关注的另一个问题是：如何对特定事件执行一些操作。将 2 个不同的问题归为 1 个是最容易让人头疼的方法。

【解决方案2】：

当您使用双向绑定 - [(ngModel)] 时，请始终使用 (ngModelChange) 而不是 (change)：

<select [(ngModel)]="val" (ngModelChange)="onChanged()">
   <option>1</option>
   <option>2</option>
   <option>1</option>
</select>

【讨论】：

是的，但是当我使用 ngModelChange 时，onChanged() 函数被调用了两次。
我已经编辑了我的帖子，我在 val 声明中遗漏了一些内容。
@Jed 每次更改都会调用一次，请再次查看我提供的 Plunker。
我不太确定我的代码发生了什么，但我的 onChange 中的代码实际上是从服务器获取的，所以我创建了一个布尔变量来检查承诺是否还没有返回方式它不会执行两次。我不确定这是否是一个干净的解决方法，但它正在工作。感谢您的帮助。