关于
ExpressionChangedAfterItHasBeenCheckedError
错误你所需要知道的事情
参考文章 https://segmentfault.com/a/1190000013972657
下面介绍一下今天遇到的这个报错
场景:
有多个级联选择下拉框,所有的数据都是一次性获取到的,在编辑页面需要将这些值回显到页面上,此时不使用异步方式处理会造成值无法渲染
/************html 文件***************/
<!-- 城市 -->
<nz-select *ngSwitchCase="'provinceId'" [(ngModel)]="area.provinceId"
formControlName="{{level1.englishName}}" style="width: 240px;" nzAllowClear
nzPlaceHolder="请选择{{level1.name}}" (ngModelChange)="changeProvince()">
<nz-option *ngFor="let option of country?.provinces[area.countryId]"
nzValue="{{option.cityId}}" nzLabel="{{option.cityName}}">
</nz-option>
</nz-select>
<!-- 区域 -->
<nz-select *ngSwitchCase="'cityId'" formControlName="{{level1.englishName}}"
style="width: 240px;" [(ngModel)]="area.cityId" nzAllowClear
nzPlaceHolder="请选择{{level1.name}}">
<nz-option *ngFor="let option of country?.citys[area.provinceId]"
nzValue="{{option.cityId}}" nzLabel="{{option.cityName}}"></nz-option>
</nz-select>
/******ts 文件******/
export class Area {
countryId = 1;
provinceId: any;
cityId: any;
}
switch (elem.englishName) {
case 'provinceId':
this.area.provinceId = elem.value;
break;
case 'cityId':
setTimeout(() => { // =====================异步方式渲染
this.area.cityId = elem.value;
})
break;
}
解决
但是如果当有很多个异步方式渲染时便会出现标题上所示的错误,造成改错误的原因是angular变更检测后重新更改值可能造成视图和model中的值不统一,所以我们需要手动触发检测
import {ChangeDetectorRef } from '@angular/core';
constructor( private cd: ChangeDetectorRef ) { }
case 'sceneId':
setTimeout(() => {
this.mediaModel.scenesId = elem.value;
})
break;
case 'formId':
setTimeout(() => {
this.mediaModel.formId = elem.value;
this.cd.detectChanges(); // ================变更检测
})
break;
case 'pointId':
setTimeout(() => {
this.mediaModel.pointId = elem.value;
this.cd.detectChanges();
})
break;