ngbModal内调用subscribe方法抛出ExpressionChangedAfterItHasBeenCheckedError错误如何解决

该错误在当前场景的核心原因是：ngbModal初始化组件时会触发独立的变更检测周期，若API订阅回调在当前变更检测周期的视图渲染完成后才修改模板绑定的属性，就会触发Angular开发模式下的前后状态一致性校验报错。你用到的setTimeout方案无效，大概率是请求返回速度过快，回调仍被归入了当前变更检测的执行队列，没有真正推迟到下一轮事件循环执行。

方案1：使用ChangeDetectorRef手动控制变更检测 #

在模态框内的组件中注入ChangeDetectorRef，API订阅回调修改完绑定变量后，手动触发一轮子组件的独立变更检测，主动同步视图和数据状态，避免事后校验报错。
示例代码：

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  template: `{{ data }}`
})
export class ModalInnerComponent implements OnInit {
  data: any;

  constructor(
    private apiService: ApiService,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.apiService.getData().subscribe(res => {
      this.data = res;
      // 手动触发变更检测同步状态
      this.cdr.detectChanges();
    })
  }
}

如果仍报错，可以在组件初始化时先临时禁用变更检测，数据加载完成后再重新启用：

ngOnInit() {
  this.cdr.detach();
  this.apiService.getData().subscribe(res => {
    this.data = res;
    this.cdr.reattach();
    this.cdr.detectChanges();
  })
}

方案2：将订阅逻辑移入AfterViewInit生命周期钩子并搭配NgZone运行 #

部分场景下API订阅在ngOnInit中触发时，模态框的DOM还未完成挂载，将订阅逻辑移到ngAfterViewInit中，若仍报错可以用NgZone.runOutsideAngular执行API请求，回调修改数据时再放回Angular zone中触发变更检测：
示例代码：

import { NgZone, AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';

export class ModalInnerComponent implements AfterViewInit {
  data: any;

  constructor(
    private apiService: ApiService,
    private ngZone: NgZone,
    private cdr: ChangeDetectorRef
  ) {}

  ngAfterViewInit() {
    this.ngZone.runOutsideAngular(() => {
      this.apiService.getData().subscribe(res => {
        this.ngZone.run(() => {
          this.data = res;
          this.cdr.detectChanges();
        })
      })
    })
  }
}

方案3：使用async管道自动管理订阅 #

Angular内置的async管道会自动处理订阅的生命周期和变更检测同步，避免手动修改绑定变量导致的状态不一致问题：
模板示例：

<div *ngIf="data$ | async as data">
  {{ data.content }}
</div>

组件代码：

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { Observable } from 'rxjs';

export class ModalInnerComponent implements OnInit {
  data$: Observable<any>;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    // 直接赋值Observable，不手动订阅
    this.data$ = this.apiService.getData();
  }
}

内容的提问来源于stack exchange，提问作者developer