如何修复mat-select结合cdkVirtualScroll的选中项与溢出截断问题

首先先修正代码中的拼写错误：*ckdVirtualFor应为*cdkVirtualFor，这是基础语法问题。

问题1：下拉框关闭时选中项不可见 #

原因 #

mat-select默认依赖已渲染的mat-option节点获取选中值的显示内容，但虚拟滚动仅渲染视口范围内的选项（你的代码中是前5个），当选中项不在此范围内时，对应的mat-option未被创建，导致无法显示选中值。

解决方法 #

使用displayWith函数自定义选中值的显示逻辑，脱离对mat-option DOM节点的依赖：

1. 在组件类中定义显示函数：

displayOption(option: any): string {
  return option ? option.value : '';
}

2. 在模板中为mat-select绑定该函数：

<mat-select formControlName="name" [displayWith]="displayOption">
  <cdk-virtual-scroll-viewport itemSize="42" [style.height.px]="5*42">
    <mat-option *cdkVirtualFor="let option of ($options | async)" [value]="option">
      {{option.value}}
    </mat-option>
  </cdk-virtual-scroll-viewport>
</mat-select>

问题2：文本溢出截断功能未生效 #

原因 #

默认的mat-option样式未开启文本截断规则，且虚拟滚动视口的宽度约束可能未传递到选项节点。

解决方法 #

添加CSS样式强制开启文本截断：

mat-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

cdk-virtual-scroll-viewport {
  width: 100%;
}

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