Angular Материал Datatable загружается медленно

Question

У меня возникли проблемы с моим angular приложением материала. Я использую данные с пагинатором. Данные не нужно сортировать.

Во время загрузки данных я показываю вращающийся мат

<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 строк, у меня возникает эта проблема:

Когда данные загружаются успешно, вращатель становится очень очень медленным в течение секунды и таблица данных показана со всем содержимым. (разделено на paginator)

Для загрузки данных из 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;
    });
}

Я уже нашел сообщение о потоке стека, которое должно помочь мне (Angular 6 MatTable Performance в 1000 строк. ). Но это мне не помогло: (

Я попробовал так:

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, это неверно задается источник данных.

Если вы передаете все свои данные в одном go, он будет отображать все данные только при первой загрузке и покажет задержку.

Поскольку вы используете paginator, вам следует разбить ваш источник данных на pageSize, чтобы только При загрузке будет отображено 20 элементов.

создайте новый экземпляр paginator: 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 данные при следующем нажатии кнопки решат вашу проблему.

Вы должны работать с mat-paginator отдельно, создав новый экземпляр MatPaginator, который является ключевым решением.

Answer 2

Вы должны отключить спиннер, когда закончите загрузку данных:

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

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

и, возможно, изменить свой шаблон следующим образом:

<mat-spinner *ngIf="showSpinner" style="margin:0 auto;"></mat-spinner>
<div *ngIf="!shools && !showSpinner">
    Keine Daten gefunden.
</div>

<div *ngIf="dataSource">
   <mat-table [dataSource]="dataSource"> 
      ...
   </mat-table>
   <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="20" showFirstLastButtons></mat-paginator>
</div>