Angular Paginator с матовым столом ломается, пока работает

Question

Я работаю над таблицей, которая показывает список данных (полученных из API). После некоторой головной боли мне удалось заставить работать сортировку и фильтр, но теперь мой пагинатор не работает. Я сталкивался с некоторыми похожими вопросами, но ни один из них, похоже, не работает для меня.

Я разместил свой paginator вне моего ngIf-div, чтобы убедиться, что это не является причиной проблемы. Сначала я подумал, что это как-то связано с загрузкой asyn c, поскольку на нее также влияла сортировка, но теперь это исправлено, и я все еще борюсь со страницей.

Ниже я разместил свой HTML и файл TS.

<div *ngIf="!isParticipantLoading">
  <mat-table [dataSource]="dataSource" class="mat-elevation-z4" matSort>

    <ng-container matColumnDef="userid">
      <mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.userid}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="role">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Role </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.role}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="company">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Company </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.company}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="sector">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Sector </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.sector}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>
<mat-paginator [pageSize]="20" [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>

export class UserListComponent implements OnInit {
  hasParticipantsError: boolean;
  isParticipantLoading: boolean;

  participants: Array<UserElement> = [];

  displayedColumns: string[] = [
    'userid',
    'name',
    'email',
    'role',
    'company',
    'sector'
  ];

  dataSource: MatTableDataSource<UserElement> = new MatTableDataSource<UserElement>();

  //Tried using the set method for paginator, aswell as the function method, both didn't work
  @ViewChild(MatSort) set matSort(sort: MatSort) {
    this.dataSource.sort = sort;
  }
  @ViewChild(MatPaginator) MatPaginator(paginator: MatPaginator) {
    this.dataSource.paginator = paginator;
  }

  constructor(
    private aus: AccountService,
    private auth: AuthService,
  ) {}

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  ngOnInit() {
    this.hasParticipantsError = false;
    this.isParticipantLoading = true;
    this.aus.getAccounts(this.auth.token).subscribe(
      (results: Array<Account>) => {
        results.forEach(
          (acc: Account) => {
            this.participants.push(new UserElement(acc));
          }
        );
        this.dataSource = new MatTableDataSource<UserElement>(this.participants);
        this.isParticipantLoading = false;
        //tried asigning the paginator here, no success
      },
          () => {
            this.hasParticipantsError = true;
            this.isParticipantLoading = false;
            this.openSnackBar();
          }
    );
  }
}

Answer 1

Вы перезаписываете свой источник данных, когда ваш Observable испускает.

Сортировка работает, потому что вы устанавливаете this.isParticipantLoading = false; после , когда вы создаете новый источник данных, поэтому *ngIf="!isParticipantLoading" соответствует и set matSort(sort: MatSort) { } запускает установку Sort для вновь созданного источника данных.

Однако, поскольку paginator не обернут в *ngIf="!isParticipantLoading", он был присвоен предыдущему источнику данных, который вы позже перезаписали:

dataSource: MatTableDataSource<UserElement> = new MatTableDataSource<UserElement>();

Возможно, вы можете это исправить заменив:

this.dataSource = new MatTableDataSource<UserElement>(this.participants);

на:

this.dataSource.data = this.participants;