使用*ngIf更新Angular视图时触发ExpressionChangedAfterItHasBeenCheckedError求助

问题描述 #

我遇到了如下报错：

该报错在我使用*ngIf更新视图（切换图标显示状态）时出现。虽然视图可以正常更新，但仍然抛出该错误，想咨询出现该问题的原因。

以下是我的.ts文件代码：

@Component({
    selector: 'app-orders',
    templateUrl: './orders.component.html',
    styleUrls: ['./orders.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class OrdersComponent implements OnInit, OnDestroy {

    loadedPendingOrders: Order[] = [];
    loadedProcessedOrders: Order[] = [];
    loadedDeliveredOrders: Order[] = [];
    loadedCancelledOrders: Order[] = [];
    pendingOrderTimelines: string[] = [];
    deliveredOrderTimelines: string[] = [];
    cancelledOrderTimelines: string[] = [];
    isDeliverySlotsActive: boolean;
    searchTerm: string;
    newOrderStatus: string;
    private subscription: Subscription;

    constructor(private ordersService: OrdersManagerService, private shopPreferencesService: ShopManagerService, private apiManager: ApiManagerService) {}

    ngOnInit(): void {
        this.subscription = timer(0, 5000).pipe(
            switchMap(() => this.apiManager.fetchShopOrders())
            ).subscribe(orders => {
                this.isDeliverySlotsActive = this.shopPreferencesService.isDeliverySlotsActive();
                const loadedOrders: OrdersList = orders;
                /* 处理订单相关逻辑 */
        });
    }

    onNewOrderAdded(status: string){
        this.newOrderStatus = status;
    }
    ....
}

以下是我的.html文件代码：

<div id="tab-group">
    <mat-tab-group dynamicHeight animationDuration="400ms">
        <mat-tab>
            <ng-template mat-tab-label>
                <span>待处理</span>
                <img src="../../assets/my-orders/blue-tiny.svg" *ngIf="newOrderStatus == 'PENDING'">
            </ng-template>
            <app-orders-list
                [orders]="loadedPendingOrders"
                [timelines]="pendingOrderTimelines"
                [isDeliverySlotsActive]="isDeliverySlotsActive"
                [searchTerm]="searchTerm"
                (newOrderStatus)="onNewOrderAdded($event)"
            ></app-orders-list>
            ...
        </mat-tab>
    </mat-tab-group>
</div>

问题原因 #

该报错为Angular开发模式下特有的ExpressionChangedAfterItHasBeenCheckedError，触发核心逻辑是单次变更检测周期内，已经完成校验的表达式值被再次修改。
对应代码场景触发路径如下：

1. 5秒轮询的接口请求返回后，更新订单相关变量触发父组件变更检测
2. 父组件完成视图校验后，子组件app-orders-list接收到新的订单数据，触发newOrderStatus事件修改父组件的newOrderStatus变量
3. 该变量被mat-tab-label的*ngIf指令绑定，Angular二次校验时发现值和首次校验结果不一致，抛出错误
4. 未初始化的newOrderStatus默认值为undefined，也会放大首次渲染时的校验差异

解决方案 #

可任选以下一种方案修复：

• 方案1：给newOrderStatus设置初始值，消除首次渲染的取值差异

  // 修改变量声明部分
  newOrderStatus: string = '';
  

• 方案2：延后变量更新时机，等待当前变更检测周期结束后再赋值

  onNewOrderAdded(status: string){
      Promise.resolve().then(() => {
          this.newOrderStatus = status;
      })
  }
  

• 方案3：手动触发父组件变更检测，同步更新校验状态

  // 先在构造函数注入ChangeDetectorRef
  constructor(
      private ordersService: OrdersManagerService, 
      private shopPreferencesService: ShopManagerService, 
      private apiManager: ApiManagerService,
      private cdr: ChangeDetectorRef
  ) {}
  
  onNewOrderAdded(status: string){
      this.newOrderStatus = status;
      this.cdr.detectChanges();
  }
  

该错误仅在开发模式下抛出用于提示开发者规范变更检测逻辑，生产环境会自动隐藏不会影响功能运行，不过建议优先修复避免后续出现视图更新不同步的问题。

内容的提问来源于stack exchange，提问作者Manuel Brás