При изменении маршрута материала таблицы мерцание - PullRequest
Новая
       4

При изменении маршрута материала таблицы мерцание

0 голосов
/ 06 ноября 2019

Я использую ngrx@store для обработки данных, а также angular material table для отображения данных с поиском, нумерацией страниц и т. Д. *

При загрузке таблицы я показываю сообщение Подождите, покасекунду ... , и после этого сообщения я обычно получаю данные в таблице с таблицей pagesize="10". Я получаю эти данные из ngrx @ store

Когда я иду по любому маршруту и ​​снова возвращаюсь на эту страницу с таблицей, мерцают таблицы и показывают все данные (более 100 элементов), а через полсекунды онивернулся в нормальное состояние с pagesize="10"

Вот как я получаю данные из состояния на ngOnInit(){...}

this.store.dispatch(new fromStore.UserActions.LoadUsers());
this.users$ = this.store.select(fromStore.UserSelectors.getUsersAll);
this.users$.pipe(takeUntil(this.destroy$)).subscribe(user => { 
  this.dataSource.data = user;
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

До того, как конструктор определил 

 @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
 @ViewChild(MatSort, { static: false }) sort: MatSort;

Здесь я показываю загрузочное сообщение 

<ng-container matColumnDef="noData">
  <mat-footer-cell *matFooterCellDef colspan="6">
    Wait for a second... data are loading...
  </mat-footer-cell>
</ng-container>
<ng-container matColumnDef="loading">
  <mat-footer-cell *matFooterCellDef colspan="6">
    There is no any data...
  </mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{ hide: dataSource != null }"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{ hide: !(dataSource != null && dataSource.data.length == 0) }"></mat-footer-row>
...