Angular Mat-table 分页器在排序工作时中断

Question

我正在处理 table，它显示数据列表（从 API 中检索）。在相当头疼之后，我设法让排序和过滤器工作，但现在我的分页器不工作了。我遇到了一些类似的问题，但其中 none 似乎对我有用。

我已将我的分页器放在我的 ngIf-div 之外，以确保这不是问题的原因。我最初认为它与异步加载有关，因为它也受到排序的影响，但现在它已修复，我仍在与分页器斗争。

下面是我的 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 发射时，您正在覆盖您的数据源。

Sort 有效，因为您设置 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;

Angular Mat-table 分页器在排序工作时中断

Angular Mat-table Paginator breaks while sort works

pagination

angular-material

angular

mat-table