Проблема виртуальной прокрутки CDK - PullRequest
Новая
       13

Проблема виртуальной прокрутки CDK

0 голосов
/ 08 ноября 2018

Встречался ли кто-нибудь с проблемой угловой прокрутки 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 label="Country">
    <app-country></app-country>
  </mat-tab>
  <mat-tab label="City">
    <app-city></app-city>
  </mat-tab>
</mat-tab-group>

Результат выглядит как bel enter image description here ow:

Код стекаблиц здесь: https://stackblitz.com/edit/angular7-virtual-scroll-issue

У кого-нибудь есть идеи для этоговопрос

Ответы [ 2 ]

0 голосов
/ 22 марта 2019

Вам нужно лениво загрузить содержимое вкладки, объявив тело в 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

0 голосов
/ 16 января 2019

Вы говорите, чтобы размер буфера оставался между 200px и 400px, но ваше окно прокрутки намного выше этого значения.

Измените минимальное и максимальное значения на 1200px, при этом элементы будут покрывать ваш видовой экран, даже если вы прокрутите вниз для просмотра других элементов.

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

...