angular中当ngModel遇上ngModelChange赋值延迟问题

开发过程中，我们有时候会遇到页面根据单选框的选择，而展示不同的界面的需求
那么，这个时候我们就要用到 radio 标签了。

<nz-radio-group
        (ngModelChange)="handleChange($event)"
        [(ngModel)]="type"
>
    <label nz-radio nzValue="0">类型一</label>
    <label nz-radio nzValue="1">类型二</label>
</nz-radio-group>
<div *ngIf="type === 0">当前type是{{type}}，对，是0</div>
<div *ngIf="type === 1">当前type是{{type}}，对，是1</div>

ps:本文html代码中使用的antdDesign UI组件库

type = 1;
handleChange(value: number) {
	console.log(value);  // 1  --->  2
	console.log(this.type);  // 1  ---> 1
    if (value === 1) {
     doSomething()...
    } else {
      doSomething()...
    }
}

接下来，我们去点击第二个label。然后我们去看控制台
本以为，在html中书写了ngModel，就会完成自动绑定事件，即
在控制台中应分别打印
0
0
------>
1
1

然而，并，并，并不是这样的…打印出来的结果是，

0
0
ps：页面上展示的是 “当前type是0，对，是0”
------>
1
0
ps：页面上展示的是 “当前type是1，对，是1”

对，你没看错。
this.type 也就是ngModel中绑定的属性值，读取的是上一次的值（旧值）所以打印出来0，而不是1。

但，但是，页面上的展示是我们理所当然所想的那样 一 一 对应的被成功赋值了。

那么，显然这样的现象出现是不正常的，因此，先说解决办法
调换 ngModel 和 ngModelChange 的顺序

<nz-radio-group
         [(ngModel)]="type"
        (ngModelChange)="handleChange($event)"  
>
    <label nz-radio nzValue="0">类型一</label>
    <label nz-radio nzValue="1">类型二</label>
</nz-radio-group>

那么，你再去看控制台，就是正常的了

为什么呐？

因为：html代码中的执行顺序问题

当ngModel在ngModelChange之后的时候，我们所选择的label的值type会赋值给了handleChange($event)，那么此过程就会沿着handleChange这条时间栈开始展开，从而结束type继续赋值给ngModel，那么就会导致ngModel的绑定值的type没有被更新，读取的还是旧数据。也这是因为这样，我们在handleChange这个事件里边执行
this.type = value（这个value 其实就是指代已经被实时赋值的type）
控制台一定会是正常的。

当ngModel在ngModelChange之前的时候，ngModel的属性值type就被率先赋值了新的type,那么控制台就会是正常的。

至此，分享结束…
我们以后在开发过程中一定要注意这个顺序问题哦！