web-dev-qa-db-ja.com

Angular 2 ngModelChange old value

NgModelの古い値と新しい値を比較するためのベストプラクティスを教えてください。

In 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>
angularangular-ngmodelangular2-forms
12
Ron Avraham

これはうまくいくかもしれない

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

または

(ngModelChange)="onModelChange($event)"

oldValue:string;
onModelChange(event) {
  if(this.oldValue != event) {
    ...
  }
  this.oldValue = event;
}
15
Günter Zöchbauer

入力フィールドの例...

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

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

ただ未来のために

[（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の後、モデルにはすでに新しい値があります。

[〜＃〜] source [〜＃〜]

3
Disaster