Я использую cdk-virtual-scroll-viewport для динамического рендеринга элементов небольшого набора за один раз при прокрутке пользователя.
В окне просмотра отображается только 5 элементов, независимо от высоты, заданной для cdk- элемент virtual-scroll-viewport.
В компоненте я загружаю массив из 100 строк.
Каждый элемент имеет высоту 48 пикселей. Высота окна просмотра составляет 480 пикселей. Итак, я ожидаю увидеть 10 предметов одновременно. Это только делает 5.
Любая помощь приветствуется.
В html:
<cdk-virtual-scroll-viewport itemSize="48" class="viewport">
<mat-option *cdkVirtualFor="let person of filteredPersons"
[value]="person" class="animated slideInRight">
<div class="option-user">
<img class="image-cropper"
src="......"
alt="User Picture" />
{{person}}
</div>
</mat-option>
</cdk-virtual-scroll-viewport>
В css:
.viewport {
height: 480px;
}
.option-user {
height: 48px;
display: flex;
flex-direction: row;
align-items: center;
}