CDK虚拟滚动问题

Question

是否有人遇到mat-tab组中的Angular 7 cdk虚拟滚动问题。

https://github.com/angular/material2/issues/13981

我的城市组件模板如下所示

<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
    <div class="state">{{state.name}}</div>
    <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

当将此城市组件作为第二个选项卡放入mat-tab-group时

<mat-tab-group>
  <mat-tab label="Country">
    <app-country></app-country>
  </mat-tab>
  <mat-tab label="City">
    <app-city></app-city>
  </mat-tab>
</mat-tab-group>

结果看起来像贝尔ow：

stackblitz代码在这里：https ://stackblitz.com/edit/angular7-virtual-scroll-issue

有人对这个问题有想法吗？

Answer 1

你告诉它保持缓冲区大小在 200 像素和 400 像素之间，但你的滚动窗口比这高得多。

将最小值和最大值都更改为 1200 像素，这将使项目覆盖您的视口，即使您向下滚动查看更多项目也是如此。

https://stackblitz.com/edit/angular7-virtual-scroll-issue-ftcnng

Answer 2

您需要通过在ng-template带有matTabContent属性的a 中声明主体来延迟加载选项卡内容。这样，仅在显示选项卡时才计算视口大小。

  <mat-tab label="City">
    <ng-template matTabContent>
      <app-city></app-city>
    </ng-template>
  </mat-tab>

请参阅：https : //material.angular.io/components/tabs/overview#lazy-loading