滾動后cdk虛擬滾動需要時間渲染項目

Question

我在cdk-virtual-scroll中使用擴展面板。 在擴展面板的 header 中，我必須顯示 4 個值，這導致滾動時渲染項目延遲近一秒。

<mat-accordion multi>
<cdk-virtual-scroll-viewport itemSize="50" [minBufferPx]="700" [maxBufferPx]="1000" scrollWindow>
  <mat-expansion-panel *cdkVirtualFor="let item of items; templateCacheSize: 0;">
    <mat-expansion-panel-header>
      <mat-label>
        <mat-label> {{item.name}}</mat-label>
        <mat-label> {{item.startTime}}</mat-label>
        <mat-label> {{item.endTime}}</mat-label>
        <mat-label> {{item.status}}</mat-label>
      </mat-label>
    </mat-expansion-panel-header>
    <div>
      <div>{{item.detail}}</div>
      <div>
        <button mat-raised-button color="accent">OK</button>
      </div>
    </div>
  </mat-expansion-panel>
</cdk-virtual-scroll-viewport>
</mat-accordion>

當我嘗試在擴展面板的 header 中使用單個值時，它工作得非常順利，但是當我顯示 4 個值時，它會減慢滾動時呈現新項目的速度。

Answer 1

我通過從*ngVirtualFor中刪除templateCacheSize屬性或將其設置為templateCacheSize: 30來解決渲染緩慢的問題。