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

最新推荐文章于 2023-03-21 15:29:06 发布

原创最新推荐文章于 2023-03-21 15:29:06 发布 · 7.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#变更检测

angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个在Angular应用中常见的问题——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;