web-dev-qa-db-ja.com

Angular2 ngModelChange以前の値

NgModelChangeのフィールドの前の（最後の）値を取得する方法はありますか？私が持っているものはこんな感じ

HTML

<input type="text" [(ngModel)]="text" (ngModelChange)="textChanged($event)">

ハンドラ

private textChanged(event) {
    console.log('changed', this.text, event);
}

私が得るものは

changed *newvalue* *newvalue*

もちろん、別の変数を使用して古い値を保持できますが、より良い方法はありますか？

angularangular2-ngmodel
25
irtaza

そのため、問題のコードに最小限の変更を加えるだけで、（少なくとも私にとっては）奇妙な解決策が見つかりました。したがって、[(ngModel)]の前に(ngModelChange)属性を割り当てると、同じハンドラーで次のようになります。

changed *older value* *new value*

this.textlikeの新しい値を取得します。

setTimeout(() => console.log(this.text), 0);
21
irtaza

あなたにできることは、

デモ： http://plnkr.co/edit/RXJ4D0YJrgebzYcEiaSR?p=preview

<input type="text" 
       [ngModel]="text"                      //<<<###changed [(ngModel)]="text" to [ngModel]="text"
       (ngModelChange)="textChanged($event)"> 

private textChanged(event) {        
    console.log('changed', this.text, event);
    this.text=event;                          //<<<###added 
}
33
micronyks

必要なのは、次のように、htmlタグの[（ngModel）]要素の左側に（ngModelChange）= "textChanged（$ event）"を配置することだけです。

<input (whatever...) (ngModelChange)="textChanged($event)" [(ngModel)]="text">

このように、textChanged（event）内では、バインド先の要素は以前の値を保持しますが、eventは新しい値です

7
DiSaSteR
<input (ngModelChange)="preTextChanged($event)" [(ngModel)]="text" (ngModelChange)="postTestChanged($event)">

このようにして、前の値と次の値を知ることができます

0
user3757628