ionic framework - Angular CDK virtual scrolling issue

Question

Having issue to render huge list by using Angular CDK virtual scrolling. Need set the itemsize to 1 to load the list properly.

Expected to load the list according to viewport size. But it load far far more than the viewport size. which the viewport size is 20 items, it will load more than 200 items at once.

Example:

<cdk-virtual-scroll-viewport [itemSize]="1" style="height: 100%">
        <div *cdkVirtualFor="let item of items;
                   let index = index;
                   let count = count;
                   let first = first;
                   let last = last;
                   let even = even;
                   let odd = odd; templateCacheSize: 0">
            <app-group [item]="item" [index]="index"></app-group>
        </div>
    </cdk-virtual-scroll-viewport>

https://ionic-angular-v5-virtual-scroll-issue-cdk.stackblitz.io

The code is using Ionic 5 + Angular. The reason of not using Ion-virtual-scroll is refer to suggestion from the team. https://github.com/ionic-team/ionic-framework/issues/22792

question from:https://stackoverflow.com/questions/65840247/angular-cdk-virtual-scrolling-issue

Answer 1

Waitting for answers