Angular: checkbox ngModel绑定变量在ts中改变但界面未更改

 

需求：

三个checkbox，用户可以同时选或选择其中一二，但不能全不选。所以考虑在用户全部的取消的时候，将三个checkbox全选。

执行：

当发现全部为取消时，将三个ngModel绑定的变量全部设为true。

<label><input type="checkbox" [(ngModel)]="valid" (ngModelChange)="trigger('VALID')"><span></span>有效</label>
<label><input type="checkbox" [(ngModel)]="invalid" (ngModelChange)="trigger('INVALID')"><span></span>无效</label>
<label><input type="checkbox" [(ngModel)]="pending" (ngModelChange)="trigger('PENDING')"><span></span>在审</label>

问题：

当第三个（不是位置，而是三个中唯一被选择那个）为false而又被在ts立即设为true时，界面并没有变化，其他两个会打勾，但第三个未选。

解决：

将三个变量设为true之前，执行ChangeDetectorRef.detectChanges();来检测变量。

constructor(private changeDetectorRef: ChangeDetectorRef) { }

...
    this.changeDetectorRef.detectChanges();
    this.valid = true;
    this.invalid = true;
    this.pending = true;
...

 

原因参考：

https://github.com/angular/angular/issues/9275