Angular2 ngModelChange以前的值

irt*_*aza 25 angular2-ngmodel angular

有没有办法在ngModelChange上获取字段的上一个(最后一个)值?我的东西是这样的

HTML

<input type="text" [(ngModel)]="text" (ngModelChange)="textChanged($event)">
Run Code Online (Sandbox Code Playgroud)

处理器

private textChanged(event) {
    console.log('changed', this.text, event);
}
Run Code Online (Sandbox Code Playgroud)

我得到的是

changed *newvalue* *newvalue*
Run Code Online (Sandbox Code Playgroud)

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

mic*_*yks 33

你能做的是,

演示: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 
}
Run Code Online (Sandbox Code Playgroud)


irt*_*aza 23

所以发现有点奇怪(至少对我而言)可能的解决方案,而且代码中的代码变化最小.所以在我得到(ngModelChange)之前分配属性[(ngModel)]是跟随相同的处理程序:

changed *older value* *new value*
Run Code Online (Sandbox Code Playgroud)

我得到了新的价值this.text:

setTimeout(() => console.log(this.text), 0);
Run Code Online (Sandbox Code Playgroud)

  • 这个小小的警告耗费了我的时间,并不知道ngModel和ngModelChange的顺序有所不同. (10认同)
  • 哦,__ is__尴尬!订单为什么要有所作为? (4认同)

DiS*_*teR 9

你需要做的就是把(ngModelChange)="textChanged($ event)"放在html标签的[(ngModel)]元素的左边,如:

<input (whatever...) (ngModelChange)="textChanged($event)" [(ngModel)]="text">
Run Code Online (Sandbox Code Playgroud)

这样,在textChanged(event)中,你绑定的元素仍然具有前一个值,而event是新的一个

  • 这是正确的答案。我不知道元素内 (ngModelChange) 和 [(ngModel)] 的顺序很重要。谢谢 (2认同)