angular - 如何在简单的单选垫选择中使用 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. 溢出时截断不起作用

堆栈 Blitz :https://stackblitz.com/edit/angular-12xmbp-s9pund?file=src/app/cdk-virtual-scroll-overview-example.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

对于截断，这在你的 stackblitz 中修复了它:

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

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

这是一个 fork 且有效的 stackblitz:

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