Angular 6 MatTable Performance в 1000 рядов.

Question

Я использую угловой материал в своем проекте и использую Mat-Table для отображения 1000 Product / row на таблицу. При изменении нумерации страниц (мы используем бэкэнд-пагинацию) таблицы на 1000 строк производительность становится очень низкой, я даже не могу писать в текстовые поля.

Я попытался отладить проблему, поэтому поместил логи в один шаблон столбца, чтобы увидеть, как работает рендер.

Я вижу, что это Рендеринг всех строк, даже если я наведите курсор на заголовки таблицы. Есть ли возможность контролировать обнаружение изменений, чтобы быть как ChangeDetectionStrategy.OnPush

Answer 1

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

Answer 2

Не уверен, поможет ли это вашей ситуации, так как кода нет, но мы обнаружили, что 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.

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