cdkVirtual для загрузки не всех товаров

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>