Angular 7 - виртуальная прокрутка в сочетании с асинхронной подпиской - PullRequest
Новая
       33

Angular 7 - виртуальная прокрутка в сочетании с асинхронной подпиской

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

Я использую async в своем проекте Angular 7 для автоматической подписки моих данных, которые я хочу отобразить.Данные отображаются в виде таблицы с около 2000 пунктов.

Следующий код взят из моего шаблона: 

<table class="table table-responsive">
  <tr *ngFor="let s of data | async | searchFilter: {keyName: searchText}">
    <td>Display some data: {{s.someProperty}}</td>
  </tr>
</table>

Мне не ясно, как использовать эту новую функцию Angular 7 только для рендеринга видимых данных при использовании моих каналов async | searchFilter: {keyName: searchText}.

Я хочу опробовать эту функцию по соображениям производительности.

1 Ответ

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

Команда Angular Material разработала хорошую документацию на https://material.angular.io, чтобы помочь вам успешно применить какие-либо функции их пакета.В частности, ваш код может быть легко изменен для использования виртуальной прокрутки.

В вашем модуле (либо app.module.ts, либо в модуле для вашей конкретной функции): 

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    // other imports,
    ScrollingModule,
  ],
  // other normal module declaration stuff
})
export class AppModule { }

Затем,в вашем component.html: 

<cdk-virtual-scroll-viewport [itemSize]='32'> <!-- or whatever the size of each item is -->
  <table class="table table-responsive">
    <tr *cdkVirtualFor="let s of data | async | searchFilter: {keyName: searchText}">
      <td>Display some data: {{s.someProperty}}</td>
    </tr>
  </table>
</cdk-virtual-scroll-viewport>

Обратите внимание:

  • Вместо директивы * ngFor для строк таблицы, вы должны использовать директиву * cdkVirtualFor
  • Вы должны обернуть всю таблицу в набор тегов и указать высоту в itemSize (не забудьте скобки вокруг itemSize)
  • Вам не нужно менять способ доступа к своим данным,кроме использования директивы * cdkVirtualFor, как упомянуто выше;он предназначен для использования точно так же, как и * ngFor

Более подробную информацию об использовании виртуальной прокрутки с таблицами и списками можно найти здесь: https://material.angular.io/cdk/scrolling/overview#elements-with-parent-tag-requirements

...