Angular cdk-virtual-scroll-viewport：无法渲染正确数量的项目

Question

我正在使用 cdk-virtual-scroll-viewport 在用户滚动时一次动态渲染一小组项目。

无论为 cdk-virtual-scroll-viewport 元素指定的高度如何，视口仅显示 5 个项目。

在该组件中，我加载了一个包含 100 个字符串的数组。

每个项目的高度为 48px。视口高度设置为 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

看看这个例子angular-virtual-scroll-example

如果您有任何其他问题，请分享一个例子。