有角度的cdk虚拟滚动视口:没有呈现正确数量的项目

Question

我使用cdk虚拟滚动视口在用户滚动时一次动态渲染一个小集合的项目。

视口仅显示5个项目，而与cdk虚拟滚动视口元素的高度无关。

在组件中，我加载了一个由100个字符串组成的数组。

每个项目的高度为48像素。视口的高度设置为480px。所以，我希望一次能看到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;
}

Answer 1

我也有同样的错误，只是修复了minBufferPx和maxBufferPx的默认值不断增加的问题。

Answer 2

看看这个例子角度虚拟滚动的例子

如果你有其他问题，分享一个例子。

Answer 3

在全局文件中添加以下内容

cdk-virtual-scroll-viewport {
height: 100%;
width: 100%;
}