cdk-virtual-scroll-viewport虚拟滚动失效，全量渲染如传统ngFor问题求助

我碰到过好几个开发者遇到这个问题，大多都是几个常见的小疏漏导致的，咱们一步步排查：

• 必须给cdk-virtual-scroll-viewport设置固定高度
  虚拟滚动的核心是基于可视区域的高度计算需要渲染的元素数量，如果viewport没有明确的高度，它会默认撑满所有内容，就和普通*ngFor一样了。你可以直接给它加内联样式或者用CSS类设置高度：

  <cdk-virtual-scroll-viewport itemSize="16" style="height: 300px;">
    <!-- 列表项 -->
  </cdk-virtual-scroll-viewport>
  

• 确保itemSize和列表项的实际高度匹配
  你设置的itemSize="16"要和每个<div>的实际渲染高度完全一致（单位是px）。如果你的列表项实际高度是20px，但itemSize设成16，CDK会错误计算需要渲染的元素数量，导致渲染过多内容。可以打开浏览器开发者工具，检查列表项的实际高度，然后调整itemSize的值。

• 确认已导入正确的Angular CDK模块
  别忘了在你的NgModule里导入ScrollerModule，否则虚拟滚动指令根本不会生效：

  import { ScrollerModule } from '@angular/cdk/scrolling';
  
  @NgModule({
    imports: [
      // 其他模块
      ScrollerModule
    ]
  })
  export class YourModule { }
  

• 检查数据源是否正确处理
  如果nums是一个Observable而不是普通数组，你需要配合async管道使用：

  <div *cdkVirtualFor="let i of nums | async">...</div>
  

完整修正示例 #

这里是调整后的代码，你可以参考：

<cdk-virtual-scroll-viewport itemSize="16" style="height: 300px; background-color: #222;">
  <div *cdkVirtualFor="let i of nums" style="color: aliceblue; height: 16px;">
    {{ i }}
  </div>
</cdk-virtual-scroll-viewport>

调试的时候可以打开开发者工具的Elements面板，滚动列表看看渲染的元素数量——正常情况下只会渲染可视区域加上前后几个缓冲元素，而不是全部的nums内容。

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