Angular 2 ngModelChange 旧值

Question

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

在angular 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

带有输入字段的示例...

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

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

Answer 2

这可能有效

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

或

(ngModelChange)="onModelChange($event)"

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

Answer 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

Angular 2 ngModelChange 旧值

Angular 2 ngModelChange old value

angular-ngmodel

angular2-forms

angular