Angular ngModelChange 和 ngModel 获取改变前的值

前言

最近在开发过程中遇到一个坑, 无法判断绑定的 model 是否真的发生了改变, 后来发现是在页面中将 ngModelChange 和 ngModel 的顺序写反了

错误的

<nz-select
  [(ngModel)]="testModel"
  (ngModelChange)="handleModelChange($event)"
>
  <nz-option
    *ngFor="let option of options"
    [nzValue]="option"
    [nzLabel]="option"
  ></nz-option>
</nz-select>

handleModelChange(newValue) {
	if (newValue === this.testModel) {
	      return;
	}
	console.log('测试发生改变')
}

正确的

<nz-select
  (ngModelChange)="handleModelChange($event)"
  [(ngModel)]="testModel"
>
  <nz-option
    *ngFor="let option of options"
    [nzValue]="option"
    [nzLabel]="option"
  ></nz-option>
</nz-select>

handleModelChange(newValue) {
	if (newValue === this.testModel) {
	      return;
	}
	console.log('测试发生改变')
}

原因

html 页面的执行顺序是从上往下的, 当 ngModel 放在前面的时候, testModel 的值已经被改变, ngModelChange 传入的 $event 也是改变后的值, 所以无法获取改变前的值, 而将 ngModelChange 放在前面的时候, 在 handleModelChange 方法中查看 testModel 值的时候仍然是改变前的值

后语

如果在 ngModelChange 中需要使用改变后的 model, 那么可以通过加上 timeout 的方式处理

handleModelChange(newValue) {
	if (newValue === this.testModel) {
	      return;
	}
	console.log('测试发生改变:' + this.testModel);
    setTimeout(() => {
		console.log('测试发生改变:' + this.testModel);
    }, 10);
  }
}