Angular 5数据表格更新时如何保持垂直滚动位置？

我之前也碰到过这个超头疼的问题！用Covalent的td-data-table做实时数据更新时，全表重绘导致滚动跳顶、工具提示乱闪的体验真的很差，尤其是Firefox里的视觉卡顿特别明显。下面几个方案亲测有效，你可以按优先级试试：

1. 必须先加的：用trackBy函数精准控制变更检测 #

这是Angular优化列表重绘的核心，默认情况下Angular会对比数组的引用，每次API返回新数组就会全量重绘所有行。给表格加上trackBy，让Angular只更新真正变化的条目：

首先在组件里定义trackBy函数，用数据的唯一标识（比如ID）来追踪：

trackByItemId(index: number, item: YourDataType): string | number {
  return item.id; // 这里替换成你的数据里的唯一键，别用index！
}

然后在模板的td-data-table上绑定这个函数：

<td-data-table 
  [data]="tableDataSource" 
  [trackBy]="trackByItemId"
>
  <!-- 你的列定义和ng-template单元格 -->
</td-data-table>

加了这个之后，Angular只会重绘ID变化的行，滚动位置完全不会跳，工具提示也不会乱闪了，这是最有效的治本方案。

2. 避免直接替换整个数据数组 #

如果API返回的是全量数据，别直接this.tableDataSource = newData，而是做增量更新——只修改、新增、删除变化的条目，保持数组引用不变：

updateTableData(newData: YourDataType[]) {
  // 1. 删除不在新数据里的旧条目
  this.tableDataSource = this.tableDataSource.filter(
    oldItem => newData.some(newItem => newItem.id === oldItem.id)
  );

  // 2. 更新现有条目，新增新条目
  newData.forEach(newItem => {
    const existingItem = this.tableDataSource.find(oldItem => oldItem.id === newItem.id);
    if (existingItem) {
      // 用Object.assign或者深拷贝更新，不要直接替换引用
      Object.assign(existingItem, newItem);
    } else {
      this.tableDataSource.push(newItem);
    }
  });

  // 如果需要保持排序，这里可以重新执行排序逻辑
}

这样数组的引用没变化，Angular的变更检测只会针对内部修改的条目，不会触发全表重绘。

3. 给复杂的ng-template单元格加OnPush变更检测 #

如果你的ng-template里嵌套了子组件或者复杂逻辑，给这些子组件设置ChangeDetectionStrategy.OnPush，进一步减少不必要的重绘：

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-custom-cell',
  templateUrl: './custom-cell.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 关键配置
})
export class CustomCellComponent {
  @Input() item: YourDataType;
}

OnPush策略下，只有当输入属性的引用变化或者组件内部触发事件时，才会更新这个单元格，能大幅降低重绘频率。

4. 兜底方案：优化滚动位置恢复（如果必须全量替换数据） #

如果上面的方案都不适用（比如API返回的数据结构每次都大幅变化），那只能优化滚动恢复的体验，减少视觉混乱。不要同步设置滚动位置，用requestAnimationFrame等浏览器重绘完成后再恢复：

updateTableData(newData: YourDataType[]) {
  // 先保存滚动容器的位置
  const scrollContainer = document.querySelector('.td-data-table-scrollable') as HTMLElement;
  const scrollTop = scrollContainer.scrollTop;

  // 全量替换数据
  this.tableDataSource = newData;

  // 等待浏览器完成重绘后再恢复滚动
  requestAnimationFrame(() => {
    scrollContainer.scrollTop = scrollTop;
  });
}

这个方法比直接同步设置要平滑很多，Firefox里的闪烁会减轻不少。

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