Angular cdk-virtual-scroll-viewport嵌套for循环运行异常求助

问题根因 #

嵌套结构异常核心有两个原因：

1. cdk-virtual-scroll-viewport 必须显式设置固定高度才能正常工作，当前未给内层视口设置高度，导致高度计算逻辑完全失效
2. 外层虚拟滚动设置的itemSize="50"和父项实际高度不匹配：父项包含h4标题+内层视口，总高度远大于50px，外层虚拟滚动的高度预估错误，自然会出现视口分割、滚动错位的问题

解决方案 #

分两种场景选择合适的实现方式：

场景1：需要父子两层独立滚动 #

调整参数匹配实际高度即可：

• 给内层视口设置固定高度
• 外层itemSize修改为父项的实际总高度（h4高度 + 内层视口高度 + 边距总和）
  修改后的代码示例：

<!-- 外层视口必须设置固定高度，itemSize对应父项实际总高度 -->
<cdk-virtual-scroll-viewport itemSize="224" style="height: 600px;">
  <div *cdkVirtualFor="let parent of parents">
    <h4>{{ parent.name }}</h4>
    <!-- 内层视口显式设置固定高度，这里设为200px，h4默认高度约24px，加起来224px对应外层itemSize -->
    <cdk-virtual-scroll-viewport itemSize="50" style="height: 200px;">
      <!-- 注意原代码里children应该是parent.children，否则所有父项会渲染相同的子列表 -->
      <div *cdkVirtualFor="let child of parent.children">
        <p>{{ child.name }}</p>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>
</cdk-virtual-scroll-viewport>

场景2：不需要独立滚动，整个列表统一滚动 #

不需要嵌套视口，直接把父子结构扁平化为一维数组渲染即可，性能更优：

1. 组件内先处理数据为一维渲染列表

interface RenderItem {
  type: 'parent' | 'child';
  data: any;
}

renderList: RenderItem[] = [];

// 组装扁平渲染列表
this.parents.forEach(parent => {
  this.renderList.push({ type: 'parent', data: parent });
  parent.children.forEach(child => {
    this.renderList.push({ type: 'child', data: child });
  });
});

2. 模板内用单一视口渲染

<cdk-virtual-scroll-viewport itemSize="50" style="height: 600px;">
  <ng-container *cdkVirtualFor="let item of renderList">
    <h4 *ngIf="item.type === 'parent'">{{ item.data.name }}</h4>
    <p *ngIf="item.type === 'child'">{{ item.data.name }}</p>
  </ng-container>
</cdk-virtual-scroll-viewport>

如果需要实现父项折叠功能，只要在折叠/展开事件触发时动态更新renderList的内容即可。

注意事项 #

• 所有cdk-virtual-scroll-viewport必须显式设置固定像素高度，不要使用百分比高度（除非父元素有确定高度），否则虚拟滚动无法计算可视区域范围
• itemSize必须和对应条目的实际渲染高度完全一致，误差过大就会出现滚动跳变、空白区域的问题

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