Angular cdk-virtual-scroll-viewport：不呈现正确数量的项目

Question

我正在使用 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;
}

Answer 1

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

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

Answer 2

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