ExpressionChangedAfterItHasBeenCheckedError报错--项目中遇到的问题

关于 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;