angular - Cdk virtual-scroll inside mat-select for mat-option

Question

有没有人能够在 mat-select 中使用虚拟滚动，如下所示？

<mat-form-field>
    <mat-select placeholder="State">
        <cdk-virtual-scroll-viewport autosize>
            <mat-option *cdkVirtualFor="let state of states" [value]="state">{{state}}</mat-option>
        </cdk-virtual-scroll-viewport>
    </mat-select>
</mat-form-field>

如你所见https://stackblitz.com/edit/angular-h4xptu?file=app%2Fselect-reset-example.html它不起作用 - 在您滚动时会导致出现奇怪的空白区域。

Answer 1

虚拟滚动视口(viewport)需要一个大小才能知道滚动容器必须有多大。这可以通过指定 [itemSize] 来完成。 <cdk-virtual-scroll-viewport>的属性(property)及其高度。

在您的示例中，一个 <option> 的高度项目是 48px。如果您想一次显示五个项目，则容器大小为 5 * 48 = 240:

<mat-form-field>
    <mat-select placeholder="State">
        <cdk-virtual-scroll-viewport [itemSize]="48" [style.height.px]=5*48>
            <mat-option *cdkVirtualFor="let state of states" [value]="state"> 
                {{state}}
            </mat-option>
        </cdk-virtual-scroll-viewport>
    </mat-select>
</mat-form-field>