Angular 6 MatTable Performance in 1000 rows.

问题

I'm using angular material in my project and I'm using Mat-Table to render 1000 Product/row per table. When Change pagination (we use backend pagination) of table to 1000 rows the performance become very slow I even can't write in textboxes.

I tried to debug the issue so I put logs on one column template so I can see how's render works.

I see it's Rerender all rows even if I hover on the table headers. Is there's any possibilities to control the change detection to be like ChangeDetectionStrategy.OnPush

回答1:

Not sure if this will help your situation as there's no code but we've found that the MatTable loads very slowly if a large data set is set before you set the datasource paginator.

For example - this takes several seconds to render...

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;
}

...but this is fast

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];
}

Incidentally, we were only finding this issue the second time we access the component as the large dataset from server was being cached and was immediately available the second time component was accessed. Another option is to add .delay(100) to your observable if you want to leave that code in the ngOnInit function.

Anyway, this may or may not help your situation.

回答2:

I had solved this issue and i improved the performance by wrap the table in custom (grid) component and Control the changeDetection of the component to be ChangeDetectionStrategy.OnPush and when i want to render update i used ChangeDetectorRef.detectChanges()

回答3:

I have found the paginator and sort to sometimes not work.

What has worked for me with over 2000 rows was:

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

Supper fast, from 10+sec to 2sec :0

回答4:

Introduce pagination. That's the only way to solve performance issue in the mat-table.

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

回答5:

I was having an issue with Turneye's answer giving me an "expressionchangedafterithasbeencheckederror", so I took inspiration from jabu.hlong's answer. It turned 5-10 seconds of load time into less than a second.

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

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

A side note (mentioned because it seems to be in the same class of issue as the one I was having): I have found it best practice to set the sort before the paginator, because I have run into issues with the reverse when setting matSortActive.

EDIT: Fixed issues with brackets and semicolons.

来源：https://stackoverflow.com/questions/50283659/angular-6-mattable-performance-in-1000-rows

标签

angular

angular-material

angular-material2

angular-cdk