Angular2 ngModelChange 以前的值

Question

有没有办法在 ngModelChange 上获取字段的前一个（最后一个）值？我有这样的东西

HTML

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

处理程序

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

我得到的是

changed *newvalue* *newvalue*

当然我可以使用另一个变量来保留旧值，但是有更好的方法吗？

Answer 1

你能做的是，

演示：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 
}

Answer 2

所以发现有点奇怪（至少对我而言）可能的解决方案，并且对相关代码的更改最少。因此，在 [(ngModel)] 之前分配 (ngModelChange) 属性时，我得到的是相同的处理程序：

changed *older value* *new value*

我在 this.text 中得到了新值，就像这样：

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

Answer 3

你需要做的就是把 (ngModelChange)="textChanged($event)" html 标签中 [(ngModel)] 元素的左侧，例如：

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

这样，在 textChanged(event) 中，您绑定的元素仍然具有以前的值，而 event 是新的

如果你输入

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

将仅使用新值调用该事件。然而：

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

将为您提供具有先前值和当前值的事件

Answer 4

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

这样就可以知道上一个值和下一个值

Answer 5

这对我有用。

<input
   [(ngModel)]="actionInputValue"
   (keydown)="prevValue = actionInputValue"
   (keyup)="doSomething()"
/>

现在在组件 ts 文件中，您可以控制和检查值。

doSomething() {
  console.log(this.prevValue, this.actionInputValue);
}

想法是 keydown 事件发生在 ngModel 更新之前。

Angular2 ngModelChange 以前的值

Angular2 ngModelChange previous value

angular2-ngmodel

angular