angular - Angular CDK 虚拟滚动 - 项目在底部被切断

Question

当我滚动到滚动查看器的底部时，最后几个项目被切断。

我正在使用实验性 cdk 并使用 autoSize。

<section id="main"
    class="section p-0">
    <div class="container">
        <ng-container *ngIf='allShows | async as data'>
            <cdk-virtual-scroll-viewport autosize
                [ngStyle]="{'height': 'calc(75vh)'}"
                class="scroll-viewport pb-2">
                <div *cdkVirtualFor='let row of data; let idx = index;  templateCacheSize:0'
                    class="columns is-multiline px-1">
                    <app-show-card class="column is-4"
                        *ngFor='let item of row'
                        [show]=item></app-show-card>
                </div>
            </cdk-virtual-scroll-viewport>
        </ng-container>
    </div>
</section>

该网站就在这里；https://lucid-thompson-158d2d.netlify.app/

堆栈闪电战；https://stackblitz.com/github/weirdyang/movie-therapy-angular（请注意，由于 scss 导入，它似乎不起作用）；

我究竟做错了什么？

Answer 1

设法通过对数组进行分块然后将 [itemSize] 设置为项目行高或使用 autosize 属性来解决此问题。