Angular Material CDK虚拟滚动列表报错：缺少itemSize属性

错误原因 #

虽然你的模板中已经设置了itemSize="48"，但仍触发错误，核心原因有两个：

1. 未导入CDK滚动模块：Angular无法识别cdk-virtual-scroll-viewport组件的属性
2. 滚动容器无固定高度：虚拟滚动需要明确的可视区域高度来计算渲染逻辑

修复步骤 #

1. 导入ScrollerModule #

在组件所属模块（如AppModule或LanguageDialogModule）中添加模块导入：

import { ScrollerModule } from '@angular/cdk/scroller';

@NgModule({
  imports: [
    // 其他已导入模块
    ScrollerModule
  ]
})
export class YourModule { }

注：Angular 14及以下版本，导入路径为@angular/cdk/scrolling

2. 给滚动容器设置固定高度 #

在language-dialog.component.scss中添加样式，确保容器有明确的可视范围：

.example-viewport {
  height: 400px; /* 可根据需求调整高度 */
  width: 100%;
  overflow: auto;
}

.language-column {
  height: 48px; /* 必须与itemSize数值一致 */
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
}

3. 优化itemSize绑定（可选但推荐） #

将字符串形式的itemSize改为数值绑定，避免类型解析问题：

<cdk-virtual-scroll-viewport [itemSize]="48" class="example-viewport">
  <ng-container *cdkVirtualFor="let language of languages">
    <div class="language-column" (click)="switchLang(language.code)" (keypress)="switchLang(language.code)" tabindex="0">
      <span class="flag-icon {{ language.flagClass }}"></span>
      {{ language.countryName }}
    </div>
  </ng-container>
</cdk-virtual-scroll-viewport>

验证要点 #

• 确认.language-column的实际渲染高度等于itemSize，否则会导致滚动位置偏移
• 检查模块导入是否正确，避免遗漏导致组件无法初始化

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