Angular绑定scrollTop触发Expression has changed报错如何解决

这个报错是Angular开发模式下的变更检测校验机制触发的：Angular在单次变更检测周期中会执行两次校验，确保所有绑定表达式的值在检测过程中没有发生变化，避免视图和数据状态不一致。

你这个场景的具体触发逻辑：

• 你在模板中直接将scrollTop属性绑定到同个DOM元素的动态只读属性scrollHeight，这个属性会随着DOM内容渲染、布局重排实时变化
• 当*ngIf="PersonList"触发tbody元素首次渲染时，Angular第一次变更检测阶段会读取当时的scrollHeight值（对应报错里的128），将scrollTop赋值为128
• 二次校验阶段如果DOM因为类名变化（你的[ngClass]逻辑）、内容重排等原因导致scrollTop被重置为0，两次求值结果不一致就会抛出这个错误
• 本质是你在单次变更检测周期内修改了绑定表达式依赖的数据源，导致前后两次校验值不匹配

方案1：移除模板绑定，在组件类中手动控制滚动位置（推荐） #

1. 先在组件类中通过ViewChild获取DOM引用

import { ViewChild, ElementRef } from '@angular/core';

// 组件类内部定义
@ViewChild('formScroll') formScroll: ElementRef<HTMLTableSectionElement>;

2. 在更新PersonList之后，等待当前变更检测周期结束、DOM渲染完成后再手动设置滚动位置：

// 给PersonList赋值的逻辑后添加这段代码
this.PersonList = 你的接口返回数据;
setTimeout(() => {
  if (this.formScroll?.nativeElement) {
    const el = this.formScroll.nativeElement;
    el.scrollTop = el.scrollHeight;
  }
}, 0);

3. 模板里删掉[scrollTop]绑定，修改后模板代码：

<tbody [ngClass]="IsDisableRowSelectValidation == false ? 'row-select-validate' : ''" #formScroll *ngIf="PersonList">

方案2：临时屏蔽报错（不推荐） #

如果你只是想临时解决报错不影响开发，可以在main.ts中开启生产模式关闭二次校验逻辑，但本质问题并没有解决，线上依然可能出现滚动位置异常的问题：

// main.ts中添加
enableProdMode();

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