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

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

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

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

enter image description here

Ответы

Ответ 1

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

Ответ 2

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

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

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 okay to set large data source... */
  this.dataSource.data = [GetLargeDataSet];
}

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

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

Ответ 3

Я обнаружил, что 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