CDK虚拟滚动问题

Question

在mat-tab组中，是否有人遇到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>

结果看起来像bel ow：

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

有人对此问题有想法吗？

Answer 1

您告诉它将Buffer的大小保持在200像素到400像素之间，但是您的滚动窗口要高得多。

将最小和最大更改为1200像素，即使向下滚动以查看更多项目，这也将使项目覆盖视口。

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

Answer 2

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

  <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

前段时间已经问过这个问题，但是有一种解决方法不是解决方法。

首先，您需要视口参考：

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

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

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

Answer 4

为我工作，谢谢！

  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.viewport.checkViewportSize();
  }

Answer 5

仅使用ItemSize。避免最大和最小缓冲区。

<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" >

它必须是单个项目的确切像素高度。