Angular Material 数据表加载缓慢

Question

我的 Angular Material 应用程序遇到了一些问题。我正在使用带有分页器的数据表。
数据不必排序。

在加载数据时，我正在展示一个 mat-spinner

<div *ngIf="schools !== undefined">
        <mat-spinner *ngIf="showSpinner" style="margin:0 auto;"></mat-spinner>
        <div *ngIf="!showSpinner">
            Keine Daten gefunden.
        </div>
</div>
<div *ngIf="schools !== undefined">
   <mat-table [dataSource]="dataSource"> 
      ...
   </mat-table>
   <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="20" showFirstLastButtons></mat-paginator>
</div>

在正常情况下，我正在加载数据，当加载数据并显示数据时，微调器停止旋转。这工作得很好。

但是对于一个大约有 400 行的表，我遇到了这个问题:

当数据加载成功时，微调器会变得非常慢，大约一秒钟，数据表显示所有内容。 (由分页器分隔)

从 api 加载数据大约需要 400 毫秒，解析它大约需要 3 毫秒，所以这应该不是问题。

我正在加载这样的数据:

ngOnInit() {
    setTimeout(() => {
      this.showSpinner = false;
    }, 5000);

    this.userID = this.authService.getCurrentUser.uid;
    this.loadData();
}

loadData() {
    this.apiService.getSchools().subscribe((schoolsData: any) => {
      this.schools = this.refParser.parse(schoolsData);
      this.dataSource = new MatTableDataSource(this.schools);

      this.cdr.detectChanges();
      this.dataSource.paginator = this.paginator;
    });
}

我已经在 stackoverflow 上找到了一篇应该对我有帮助的帖子( Angular 6 MatTable Performance in 1000 rows. )。
但这对我没有帮助:(

我是这样试的:

ngOnInit() {
    setTimeout(() => {
      this.showSpinner = false;
    }, 5000);

    this.userID = this.authService.getCurrentUser.uid;
    //this.loadData();
    this.dataSource = new MatTableDataSource();

    this.dataSource.paginator = this.paginator;
}

ngAfterViewInit(){
    setTimeout(() => {
      this.apiService.getSchools().subscribe((schoolsData: any) => {
        this.schools = this.refParser.parse(schoolsData);
        this.dataSource.data = this.schools;
        this.cdr.detectChanges();
      })
    })
}

它没有给我任何性能提升。唯一发生的事情是，分页器不再工作了。

有人知道什么可以帮助我提高应用程序的性能吗？

谢谢您的回答:)

Answer 1

我过去也遇到过同样的问题，
Mat-Table 本身处理变化检测，所以它不是 mat table 的问题，
数据源设置错误。

如果您一次性传递所有数据，它将仅在第一次加载时呈现整个数据并显示延迟。

由于您使用的是分页器，您应该将数据源分解为 pageSize，以便在加载时仅呈现 20 个元素。

创建分页器的新实例:actualPaginator: MatPaginator;

@ViewChild(MatPaginator, {static: false})
  set paginator(value: MatPaginator) {
    this.actualPaginator = value;
  }

this.actualPaginator.pageIndex = Math.ceil(this.schools.length/this.actualPaginator.pageSize) - 1;

 let nextPageData: any[] = [];
 nextPageData = this.schools.slice((this.actualPaginator.pageSize * this.actualPaginator.pageIndex),(this.actualPaginator.pageSize * (this.actualPaginator.pageIndex + 1)));
 this.dataSource.data = nextPageData;

所以分发你的 this.schools数据并按页面大小计数加载它，使用 this.schools 的下一个插槽更改数据源下一个按钮单击的数据将解决您的问题。

您必须通过创建新的 MatPaginator 实例来单独操作 mat-paginator，这是关键解决方案。