Cdk虚拟滚动问题

Question

有没有人遇到过angular 7 cdk虚拟滚动在mat-tab组中不正常工作的问题？

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>

结果看起来像贝尔

现在：

stackblitz代码如下：https://stackblitz.com/edit/angular7-virtual-scroll-issue

有谁对这个问题有一些想法吗？

Answer 1

您告诉它将缓冲区大小保持在200px到400px之间，但您的滚动窗口要比这高得多。

将最小值和最大值都更改为1200px，这将使项目覆盖您的视区，即使您向下滚动以获取更多项目。

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

Answer 2

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

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

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

Answer 3

这个问题已经提出了一段时间，但有一个解决方案，而不是一个变通办法。

首先，您需要Viewport参考：

@ViewChild(CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport;

然后，当视口的大小发生更改时，可以调用checkViewportSize()方法。在调用此方法之前，需要更新Viewport容器的样式高度。

this.heightChange$.subscribe(() => {
    this.cdkVirtualScrollViewport.checkViewportSize();
});