cdk-virtual-scroll-viewport滚动异常问题求助

在使用Angular CDK虚拟滚动时，遇到两个互斥问题：

• 不设置templateCacheSize:0时，滚动或过滤数据后列表项渲染顺序错误
• 设置templateCacheSize:0后，渲染顺序正常，但滚动行为异常（跳回顶部、滚动混乱）

1. 使用trackBy替代templateCacheSize:0 #

这是解决此类问题的标准方案，既能保证数据更新时的正确渲染，又不会破坏虚拟滚动的缓存机制：

步骤1：在组件类中定义trackBy函数 #

利用列表项的唯一标识（比如你的contractSubsystemSkey），帮助CDK区分不同的列表项：

trackByEngineId(index: number, engine: any): string {
  return engine.contractSubsystemSkey;
}

步骤2：在模板中绑定trackBy #

移除templateCacheSize:0，添加trackBy配置：

<cdk-virtual-scroll-viewport itemSize="50" class="oo__virtual-scroll-viewport">
  <div *cdkVirtualFor="let engine of filteredEngines; trackBy: trackByEngineId">
    <oo-engine 
      [showPdPsnEsn]="showPdPsnEsn"
      [hasUserTBOExtensionReadPermission]="hasUserTBOExtensionReadPermission"
      [toggleValueId]="toggleValueId"
      [unfoldValue]="unfoldValue"
      [engine]="engine" 
      id="{{engine.contractSubsystemSkey}}"
      (sendChosenEngineToParent)="receiveEngine($event)">
    </oo-engine>
  </div>
</cdk-virtual-scroll-viewport>

2. 过滤后调整滚动位置（可选） #

如果过滤后列表长度变化导致滚动位置异常，可以在过滤完成后手动调整：

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { ViewChild } from '@angular/core';

@Component(/* 组件元数据 */)
export class YourComponent {
  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;
  filteredEngines: any[] = [];

  filterEngines(filterText: string) {
    // 执行过滤逻辑，更新filteredEngines为新数组
    this.filteredEngines = /* 过滤后的结果 */;
    
    // 延迟调整滚动位置，确保视图已完成更新
    setTimeout(() => {
      // 滚动到顶部，或根据业务需求设置目标索引
      this.viewport.scrollToIndex(0);
    }, 0);
  }
}

3. 检查子组件的变更检测（如果使用OnPush） #

如果oo-engine组件使用了ChangeDetectionStrategy.OnPush，需确保输入属性变化能触发更新：

• 确保filteredEngines始终是新数组（比如使用filter()、slice()等返回新数组的方法，而非直接修改原数组）
• 在oo-engine组件中通过ngOnChanges监听engine输入属性的变化，手动处理数据更新逻辑

方案原理 #

• trackBy让虚拟滚动仅在列表项的唯一标识变化时才重建组件，避免了默认缓存机制导致的旧数据复用问题，同时保留了缓存的性能优势，不会引发滚动异常。
• 手动调整滚动位置可以避免过滤后列表长度变化带来的滚动偏移问题。

内容的提问来源于stack exchange，提问作者Tamás Köböl