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

关于 ExpressionChangedAfterItHasBeenCheckedError 错误你所需要知道的事情
参考文章 https://segmentfault.com/a/1190000013972657

下面介绍一下今天遇到的这个报错

场景:

有多个级联选择下拉框,所有的数据都是一次性获取到的,在编辑页面需要将这些值回显到页面上,此时不使用异步方式处理会造成值无法渲染

/************html 文件***************/


  
  




  


/******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;