cdkVirtualFor不加载所有项目

Question

我遇到了一个小问题，但找不到原因。 所以我想显示一个可观察的列表（它返回3个对象） 我的问题是仅显示前两个项目。 当我使用常规列表时，所有这些都将出现。

我做错了什么？

<div *ngIf="(clients$ | async) as clients; else loading">
    <cdk-virtual-scroll-viewport *ngIf="clients.length > 0; else noResult" itemSize="100" style="height:100vh">
        <mat-nav-list role="navigation" class="clients" fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutAlign="flex-start" fxLayoutGap="6px">
            <mat-list-item *cdkVirtualFor="let client of clients; templateCacheSize: 0" role="listitem" style="padding-bottom: 8px;">
                <h1>{{client.id}}</h1>
            </mat-list-item>
        </mat-nav-list>
    </cdk-virtual-scroll-viewport>
    <ng-template #noResult>
        <div fxLayout="column" fxLayoutAlign="space-evenly center">
            <h3>No result</h3>
        </div>
    </ng-template>
</div>
<ng-template #loading>
    <div fxLayout="column" fxLayoutAlign="space-evenly center">
        <h3>Loading...</h3>
        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>
</ng-template>