Cdk virtual-scroll внутри mat-select для mat-option - PullRequest
Новая
       30

Cdk virtual-scroll внутри mat-select для mat-option

0 голосов
/ 11 сентября 2018

Кто-нибудь смог использовать виртуальную прокрутку внутри 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, это не работает - вызывает странное пустое пространство, как выпрокрутки.

1 Ответ

0 голосов
/ 05 декабря 2018

Виртуальному окну просмотра прокрутки необходим размер, чтобы знать, насколько большим должен быть контейнер прокрутки.Это можно сделать, указав [itemSize] свойство <cdk-virtual-scroll-viewport> и его высоту.

В вашем примере высота одного элемента <option> составляет 48 пикселей.Если вы хотите показать пять элементов одновременно, размер контейнера будет 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>
...