Angular 2 ngModelChange 旧值答案

【问题标题】：Angular 2 ngModelChange old valueAngular 2 ngModelChange 旧值
【发布时间】：2017-05-23 11:34:06
【问题描述】：

谁能告诉我比较 ngModel 新旧值的最佳做法是什么？

角度 1：

$scope.$watch('someProperty', funciton(oldVal, newVal){
    // code goes here
})

我问这个是因为(ngModelChange) 从来没有给我带来oldVal，只有newVal。

就我而言，我在 <select> 标记中使用 ngModel 并将旧选择与新选择进行比较：

<select [(ngModel)]="current" (ngModelChange)="onModelChange($event)">
     <option *ngFor="let item of myArray" [ngValue]="item">{{item.name}} </option>
</select>

【问题讨论】：

标签： angular angular-ngmodel angular2-forms

【解决方案1】：

输入字段示例...

<div *ngFor="let value of values">{{value}}
    <input [(ngModel)]="value" (focus)="old=value" (ngModelchange)="doSomething(old, value)">
</div>

doSomething(oldVal, newVal) {
    // some code
}

【讨论】：

我在

【解决方案2】：

这可能有效

(ngModelChange)="onModelChange(oldVal, $event); oldVal = $event;"

或

(ngModelChange)="onModelChange($event)"

oldValue:string;
onModelChange(event) {
  if(this.oldValue != event) {
    ...
  }
  this.oldValue = event;
}

【讨论】：

我试过了，但 oldVal 参数未定义。我在
只需在组件类中声明一个具有此名称的变量即可。我将它添加到我的代码中（在第二个示例中）
好的，我现在明白了。但是这个解决方案似乎非常手动，你确定这是最佳做法吗？ Angular 2 没有提供任何东西来获取 oldVal？
不，Angular 只提供$event，或者如果您使用[ngModel]="myValue"，则使用新值更新myValue 属性。如果您使用[myProp]="someValue" 绑定到@Input() myProp;，那么当绑定更新ngOnChanges(changes) 时，changes 也包含旧值，但这不适用于您的情况，它仅适用于来自父级的绑定给孩子。
在我的例子中，选择值已经设置好了，所以this.oldValue的值是undefined，因为onModelChange将是第一次运行。是否也有解决方法？

【解决方案3】：

只为未来

我们需要观察到 [(ngModel)]="hero.name" 只是一个捷径，可以脱糖为： [ngModel]="hero.name" (ngModelChange)="hero.name = $事件”。

因此，如果我们对代码进行去糖化处理，我们最终会得到：

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

或

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

如果您检查上面的代码，您会注意到我们最终得到了 2 个 ngModelChange 事件，并且这些事件需要按某种顺序执行。

总结：如果你把 ngModelChange 放在 ngModel 之前，你会得到 $event 作为新值，但你的模型对象仍然保持以前的值。 如果你把它放在 ngModel 之后，模型就已经有了新的值。

SOURCE

示例堆栈闪电战： https://stackblitz.com/edit/angular-ivy-zlhwex

【讨论】：