CdkVirtualFor无任何渲染问题：聊天应用cdk虚拟滚动不显示内容

核心原因分析 #

• itemSize属性绑定错误：你当前写的itemSize="100"是字符串类型传值，而cdk-virtual-scroll-viewport的itemSize输入属性要求接收数字类型，错误的参数类型会导致CDK无法计算元素渲染位置，最终无内容输出。
• 视口高度未生效：你定义的.cdk类选择器依赖父级.form-container类，如果cdk-virtual-scroll-viewport的上层元素没有对应类名，会导致视口高度为0，自然无法渲染任何内容。
• 数组变更未触发CDK检测：如果chat_history是异步加载、动态追加数据的场景，直接对原数组执行push等操作没有变更数组引用时，*cdkVirtualFor可能无法识别到数据更新。

修复步骤 #

1. 修正itemSize绑定，给属性加上方括号实现数字传值，同时添加trackBy优化渲染：

<cdk-virtual-scroll-viewport [itemSize]="100" class="cdk">
  <div *cdkVirtualFor="let item of chat_history; trackBy: trackByFn" class="chat-data">
    <ul>
      <li class="me">{{item.message}}</li>
    </ul>
  </div>
</cdk-virtual-scroll-viewport>

2. 确保视口高度正确生效：
   可以先直接加内联样式测试高度是否正常：

<cdk-virtual-scroll-viewport [itemSize]="100" class="cdk" style="height: 500px">

或者调整CSS选择器，取消对父类的依赖：

.cdk {
  height: 500px;
}
.chat-data {
  height: 100px;
}

3. 组件中添加trackBy函数，动态更新数据时变更数组引用：
   在chatbox.component.ts中添加：

trackByFn(index: number, item: any) {
  // 用聊天消息的唯一ID做追踪，没有的话可以用index兜底
  return item.id ?? index;
}
// 追加新消息时用扩展运算符更新数组引用，不要直接push
addNewMessage(msg: any) {
  this.chat_history = [...this.chat_history, msg];
}

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