web-dev-qa-db-ja.com

CDK仮想スクロールの問題

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>

この都市コンポーネントを2番目のタブとして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>

結果はベルのようになります enter image description here ow：

Stackblitzコードは次のとおりです： https://stackblitz.com/edit/angular7-virtual-scroll-issue

誰かがこの問題について何か考えを持っていますか？

angularangular7angular-cdk
6
rodent_la

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

1
Liviu

少し前に質問されましたが、回避策ではない解決策があります。

まず、ビューポートリファレンスが必要です。

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

次に、ビューポートのサイズが変更されたときに、メソッドcheckViewportSize()を呼び出すことができます。このメソッドを呼び出す前に、ビューポートコンテナーのスタイルの高さを更新する必要があります。

_this.heightChange$.subscribe(() => {
    this.cdkVirtualScrollViewport.checkViewportSize();
});
_
0
Simon Steinbeisser

私のために働く、ありがとう！

  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

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