Question

我正在处理一个显示数据列表的表（从API检索）。经过一番头痛之后，我设法使排序和过滤器正常工作，但是现在我的分页器无法正常工作。我遇到了一些类似的问题，但似乎没有一个对我有用。

我将分页器放置在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发出时，您正在覆盖dataSource。

排序之所以有效，是因为您在创建新的dataSource之后设置了this.isParticipantLoading = false; ，因此*ngIf="!isParticipantLoading"遵从并且set matSort(sort: MatSort) { }触发了将Sort设置为新创建的dataSource。

但是，由于分页器没有用*ngIf="!isParticipantLoading"包装，因此将其分配给了先前要覆盖的dataSource：

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

您可能可以通过替换以下内容来对其进行修复：

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

具有：

this.dataSource.data = this.participants;

Angular Mat-Table Paginator在排序工作时中断

1 个答案: