Angular CDK-VIRTUAL-SCROLL-VIEWPORT不起作用

Question

我有一个与CDK-Virtual-Scroll-viewPort的组件，该组件显示卡

scrolling.component.ponent.html

<cdk-virtual-scroll-viewport (scrolledIndexChange)="scrolledEnd()" class="list-container" [itemSize]="50">
  <app-coin *cdkVirtualFor="let coin of coins; trackBy: trackByFn" [coin]="coin"
            class="list-group-item state-item">
  </app-coin>
</cdk-virtual-scroll-viewport>

scrolling.component.component.ts

export class ScrollingComponent {
  @ViewChild(CdkVirtualScrollViewport) private viewport: CdkVirtualScrollViewport;

  public coins: ICoin[] = [GOLD_SALE_COIN, PRESALE_COIN, GOLD_SALE_COIN, SILVER_COIN, GOLD_COIN, GOLD_SALE_COIN];

  constructor(private cd: ChangeDetectorRef) {
  }

  public trackByFn(index: number, item: ICoin): number {
    return item.id;
  }

  public scrolledEnd(): void {
    if(this.viewport.getRenderedRange().end === this.coins.length) {
      this.coins.push(...[GOLD_SALE_COIN, PRESALE_COIN, GOLD_SALE_COIN, SILVER_COIN, GOLD_COIN, GOLD_SALE_COIN]);
      this.cd.markForCheck();
    }
  }
}

i仅输出6张卡片，这些卡在数组

如何确保完成完成的那一刻，我添加了更多元素