Angular中ExpressionChangedAfterItHasBeenCheckedError错误排查求助

我开发了一个基于Angular CDK虚拟滚动的轮播子组件，父组件通过Observable传递数据。当断点变化时，出现ExpressionChangedAfterItHasBeenCheckedError错误，手动调用ChangeDetectorRef.detectChanges()不仅没解决问题，还可能触发无限循环。

错误信息 #

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '285.5'. Current value: '278'.. Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (core.mjs:7940:1)
    at bindingUpdated (core.mjs:12832:1)
    at Module.ɵɵproperty (core.mjs:14565:1)
    at CarouselComponent_div_0_Template (carousel.component.html:3:57)
    at executeTemplate (core.mjs:9717:1)
    at refreshView (core.mjs:9580:1)
    at refreshEmbeddedViews (core.mjs:10731:1)
    at refreshView (core.mjs:9604:1)
    at refreshComponent (core.mjs:10777:1)
    at refreshChildComponents (core.mjs:9376:1)

核心原因 #

模板中直接绑定container.offsetWidth这类动态DOM属性，Angular变更检测完成后，DOM尺寸可能因布局调整发生变化，导致绑定值前后不一致，触发错误。同时断点订阅在ngOnInit中执行，此时DOM尚未完全渲染，尺寸计算不准确。

解决方案 #

1. 将动态计算逻辑移至组件类，避免模板直接依赖DOM属性 #

修改子组件代码，把所有依赖DOM尺寸的计算移到组件类中，用属性存储计算结果，模板仅绑定这些属性：

子组件.ts 修改：

import { Component, Input, OnInit, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Subject, takeUntil } from 'rxjs';

export class CarouselComponent implements OnInit, AfterViewInit, OnDestroy {
  private destroy$ = new Subject<void>();
  @ViewChild(CdkVirtualScrollViewport) viewPort!: CdkVirtualScrollViewport;
  @ViewChild('container') container!: ElementRef<HTMLDivElement>;

  @Input() name!: string;
  @Input() carouselData$!: Observable<any>;

  itemsPerPage = 0;
  containerWidth = 0;
  itemSizeCalculated = 0;
  minHeight = '0px';
  gridWidth = '0px';

  constructor(
    private breakpoint$: BreakpointObserver,
    private cdr: ChangeDetectorRef
  ) { }

  ngOnInit(): void {
    // 初始化逻辑延迟到AfterViewInit执行
  }

  ngAfterViewInit(): void {
    this.containerWidth = this.container.nativeElement.offsetWidth;
    this.setItemsPerPage();
    this.calculateDimensions();
    this.cdr.detectChanges(); // 仅初始化时手动触发一次变更检测
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  scroll(direction: string) {
    const currentOffset = this.viewPort.measureScrollOffset();
    const pageSize = this.containerWidth;
    const itemSize = this.itemSizeCalculated;
    let offsetDelta = 0;

    switch (direction) {
      case 'start':
        offsetDelta = -pageSize + (itemSize - (currentOffset % itemSize));
        break;
      case 'end':
        offsetDelta = pageSize - (currentOffset % itemSize);
        break;
    }

    if (currentOffset % itemSize === 0 && direction === 'start') {
      offsetDelta = -pageSize;
    }

    const newOffset = currentOffset + offsetDelta;
    this.viewPort.scrollToOffset(newOffset, 'smooth');
  }

  setItemsPerPage() {
    this.breakpoint$.observe([
      Breakpoints.XSmall,
      Breakpoints.Small,
      Breakpoints.Medium,
      Breakpoints.Large
    ]).pipe(takeUntil(this.destroy$))
      .subscribe(result => {
        if (result.matches) {
          if (result.breakpoints[Breakpoints.XSmall]) {
            this.itemsPerPage = 2;
          } else if (result.breakpoints[Breakpoints.Small]) {
            this.itemsPerPage = 3;
          } else if (result.breakpoints[Breakpoints.Medium]) {
            this.itemsPerPage = 4;
          } else if (result.breakpoints[Breakpoints.Large]) {
            this.itemsPerPage = 6;
          }
          // 断点变化后重新计算尺寸
          this.containerWidth = this.container.nativeElement.offsetWidth;
          this.calculateDimensions();
        }
      });
  }

  private calculateDimensions() {
    if (this.itemsPerPage > 0 && this.containerWidth > 0) {
      this.itemSizeCalculated = this.containerWidth / this.itemsPerPage;
      this.minHeight = `${(this.itemSizeCalculated * (16 / 9))}px`;
    }
  }

  // 数据加载完成后计算网格宽度
  onDataLoaded(data: any) {
    if (data?.results?.length && this.itemSizeCalculated > 0) {
      this.gridWidth = `${this.itemSizeCalculated * data.results.length}px`;
    }
  }
}

子组件HTML 修改：

<div #container *ngIf="name && (carouselData$ | async) as data" class="viewport-container">
  <h5>{{name}}</h5>
  <cdk-virtual-scroll-viewport orientation="horizontal" [itemSize]="itemSizeCalculated"
    [minBufferPx]="containerWidth*2" [maxBufferPx]="containerWidth*2"
    [ngStyle]="{'min-height': minHeight}" class="viewport">

    <mat-grid-list gutterSize="13" [ngStyle]="{'width': gridWidth}"
      rowHeight="9:16" [cols]="data.results.length" >
      <mat-grid-tile *cdkVirtualFor="let item of data.results">
        <img src="https://images.org/{{item.image_path}}" alt="...">
      </mat-grid-tile>
    </mat-grid-list>

  </cdk-virtual-scroll-viewport>
  <button mat-icon-button color="primary" aria-label="Previous Page" (click)="scroll('start')">
    <mat-icon>navigate_before</mat-icon>
  </button>
  <button mat-icon-button color="primary" aria-label="Next Page" (click)="scroll('end')">
    <mat-icon>navigate_next</mat-icon>
  </button>
</div>

2. 修复父组件HTML拼写错误 #

父组件HTML中</app-carouasel>拼写错误，应改为</app-carousel>：

<div>
  <app-carousel [name]="itemsData.name" [carouselData$]="itemsData.items$"></app-carousel>
</div>

3. 监听容器resize事件（可选，增强响应式） #

若需要实时响应容器尺寸变化，可添加ResizeObserver监听：

private resizeObserver!: ResizeObserver;

ngAfterViewInit(): void {
  // ... 原有代码
  this.resizeObserver = new ResizeObserver(entries => {
    if (entries[0]) {
      this.containerWidth = entries[0].contentRect.width;
      this.calculateDimensions();
    }
  });
  this.resizeObserver.observe(this.container.nativeElement);
}

ngOnDestroy(): void {
  // ... 原有代码
  this.resizeObserver.disconnect();
}

关键说明 #

• 禁止在模板中直接使用container.offsetWidth这类动态值，所有计算逻辑移至组件类，确保变更检测时绑定值稳定。
• 断点监听移至ngAfterViewInit执行，此时DOM已渲染完成，能获取准确的容器尺寸。
• 使用takeUntil管理订阅，避免内存泄漏。
• 仅在初始化时手动触发一次变更检测，避免无限循环。

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