Угловой 6 MatTable Performance в 1000 рядов.

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

Например - это занимает несколько секунд для рендеринга ...

dataSource: MatTableDataSource<LocationItem> = new MatTableDataSource();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  this.dataSource.data = [GetLargeDataSet];
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

... но это быстро

ngOnInit() {
  // data loaded after view init 
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;

  /* now it's okay to set large data source... */
  this.dataSource.data = [GetLargeDataSet];
}

Между прочим, мы обнаружили эту проблему только при втором доступе к компоненту, поскольку большой набор данных с сервера кэшировался и был немедленно доступен при втором доступе к компоненту. Другой вариант - добавить .delay (100) к наблюдаемому объекту, если вы хотите оставить этот код в функции ngOnInit.

В любом случае, это может помочь, а может и не помочь вашей ситуации.

Я решил эту проблему и улучшил производительность, заключив таблицу в пользовательский (сеточный) компонент и установив changeDetection компонента на ChangeDetectionStrategy.OnPush, а когда я хочу визуализировать обновление, я использовал ChangeDetectorRef.detectChanges()

Чтобы продолжить ответ @Turneye. Причина, по которой это происходит, заключается в том, что пагинатор устанавливается после того, как все строки были отрисованы, потому что это то, что вам сообщает хук ngAfterViewInit.

Сначала он отображает все строки из источника данных, а затем видит: «Эй, я получаю пагинатор, позвольте мне просто удалить все строки (кроме счетчика пейджера)». Очевидно, что это очень медленно для больших наборов данных и / или сложных шаблонов ячеек таблицы.

Вы можете решить эту проблему, используя параметр {static: true} на вашем @ViewChild. Это сделает пагинатор доступным внутри хука жизненного цикла ngOnInit и до того, как будет отрисована какая-либо строка:

Чтобы украсть его код, вы можете изменить его на этот, сохранив при этом быструю таблицу:

readonly dataSource: MatTableDataSource<LocationItem> = new MatTableDataSource();

@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

ngOnInit() {
  this.dataSource.data = [ GetLargeDataSet ];
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

Имейте в виду, что это не сработает, если ваш mat-paginator находится внутри структурной директивы, такой как *ngIf

Другая проблема производительности может заключаться в том, что вам нужно объявить функцию trackBy:

Для повышения производительности в таблице может быть предоставлена ​​функция trackBy, аналогичная функции Angular ngFor trackBy. Это сообщает таблице, как однозначно идентифицировать строки, чтобы отслеживать, как данные изменяются при каждом обновлении.

<table mat-table [dataSource]="dataSource" [trackBy]="myTrackById">

Я обнаружил, что paginator и sort иногда не работают.

Что сработало для меня с более чем 2000 строками, было:

 ngAfterViewInit() {
      setTimeout(() => {
          this.getLargeDataSet.subscribe(largeDataSet => {
              this.dataSource.paginator = this.paginator;
              this.dataSource.sort = this.sort;
              this.dataSource.data = largeDataSet;
          });
      });
 }

Ужин быстрый, от 10 + сек до 2 сек: 0

Наблюдаемый большой набор данных передается из родительского компонента

После долгих усилий я смог объединить кусочки множества разных ответов из этого сообщения, включая @ turneye's выше и выбранный OP правильный ответ, а также ответы на другой похожий пост SO, здесь и здесь.

У меня было ~ 1000 строк, которые мне понадобились для родительского компонента на странице, а также несколько дочерних компонентов, включая компонент MatTable с разбивкой на страницы.

Данные загружались за <500 мс, но тогда на рендеринг страницы в среднем уходит 15 секунд, поскольку изначально я просто передавал MatTableDataSource объект с уже назначенными данными.

Решение:

1. Передайте наблюдаемый объект с данными, а затем подпишитесь на него после инициализации представления, установив свойство MatTableDataSource.data после установки MatPaginator и MatSort.
2. Установите changeDetection в ChangeDetectionStrategy.OnPush в конфигурации декоратора Component.
3. После установки свойства MatDataSource.data в наблюдаемом теле, сообщите angular об обнаружении изменений с помощью ChangeDetectorRef.detectChanges()

Теперь полная DOM визуализируется примерно за 1 секунду, что нормально, учитывая объем данных, которые должны присутствовать одновременно.

Вот урезанный пример:

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'app-dynamic-grid',
    templateUrl: './dynamic-grid.component.html',
    styleUrls: ['./dynamic-grid.component.scss'],
  })
  export class DynamicGridComponent implements OnInit, AfterViewInit {
    @Input() public dataSource$: Observable<any[]>;
  
    public matDataSource = new MatTableDataSource<any>();
  
    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
    @ViewChild(MatSort, { static: true }) sort: MatSort;
  
    constructor(private changeDetectorRef: ChangeDetectorRef) {}
  
    ngOnInit(): void {}
  
    ngAfterViewInit() {
      this.matDataSource.paginator = this.paginator;
      this.matDataSource.sort = this.sort;
  
      this.dataSource$.subscribe(x => {
        this.matDataSource.data = x;

        // The important part:
        this.changeDetectorRef.detectChanges();
      });
 
    }
}

У меня возникла проблема с ответом Турни, который дал мне «выражение изменилось после того, как оно было проверено», поэтому я черпал вдохновение из ответа jabu.hlong. Это превратило 5-10 секунд загрузки менее чем в секунду.

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;

  setTimeout(() => {
    this.dataSource.data = getData(); // Or whatever your data source is
  });
}

Боковое примечание (упомянутое, потому что, похоже, оно относится к тому же классу проблем, что и тот, который у меня был): я считаю, что лучше всего устанавливать сортировку перед пагинатором, потому что у меня возникли проблемы с обратным при настройке matSortActive .

РЕДАКТИРОВАТЬ: исправлены проблемы со скобками и точками с запятой.

Я все еще сталкивался с проблемой, несмотря на решение [@ turneye выше]. Для меня решение заключалось в том, чтобы существенно отложить переназначение источника данных до последнего возможного момента, выполнив следующие действия:

ngAfterViewInit() {
    const ds = new MatTableDataSource<ProcessDelaysTable>()
    ds.sort = this.sort
    ds.paginator = this.paginator
    ds.paginator.pageSizeOptions = [5, 10, 50, 100, this.dataPayload.length]
    ds.data = this.dataPayload
    this.dataSource = ds
}

По сути, эта проблема возникает из-за того, что вы изменяете глубокое свойство в this.datasource, изменяя его данные после его проверки. Однако, если вы назначаете this.datasource новому объекту DataSource, вы изменяете его адрес в памяти, разрешая все конфликты.

Ввести разбиение на страницы. Это единственный способ решить проблему производительности в мат-таблице.

https://material.angular.io/components/table/overview#pagination