如何在简单的单选垫子选择中使用cdkVirtualScroll

Question

出于性能原因，我尝试将cdkVirtualScroll与mat-select一起使用。

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

这是有效的，但有多个问题：

1. 关闭选择时，所选选项不可见。只有当它是前5个选项之一时，它才可见
2. 溢出时截断不起作用

Stacklitz：https://stackblitz.com/edit/angular-12xmbp-s9pund?file=src/app/cdk-virtual-roll-overview-esample.html

如何解决这些问题？

Answer 1

对于第一个问题，将itemSize设置为1似乎可以解决它

<cdk-virtual-scroll-viewport
itemSize="1"
[style.height.px]="5*42"
minBufferPx="400"
maxBufferPx="400"
>

我在这里找到了这个解决方案：https://github.com/angular/components/issues/24943

对于截断，这在您的堆栈中修复了它：

::ng-deep .cdk-virtual-scroll-content-wrapper {
width: 0;
}

创建的包装的宽度太大。当您将宽度设置为0时，它的最小宽度将接管。您可以设置最大宽度。

这是一个分叉的工作堆栈：

https://stackblitz.com/edit/angular-12xmbp-rwnjuf?file=src/app/cdk-virtual-roll-overview-esample.html