Angular 2 ngModelChange旧值

Question

有人可以告诉我比较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>

Answer 1

这可能会奏效

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

要么

(ngModelChange)="onModelChange($event)"

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

Answer 2

只为未来

我们需要观察到 [(ngModel)]="hero.name" 只是一个可以去糖化的捷径： [ngModel]="hero.name" (ngModelChange)="hero.name = $event ”。

因此，如果我们对代码进行脱糖，我们最终会得到：

<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 之后，模型就已经有了新的值。

来源

Answer 3

输入字段示例...

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

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