typescript - 角度垫表分页不起作用，整个数据加载到垫表的第一页上

Question

我使用了 Angular Material 表，我从 ts 文件绑定(bind)了数据源，但是所有数据都加载在第一页上，分页不起作用。我还有两个表，它们位于同一页面上，同样的问题其他表也是如此。

我已经尝试过

setTimeout(() => this.dataSource.paginator = this.paginator);

和

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator
}

HTML:

    <mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers">
      <ng-container matColumnDef="checked">
        <mat-header-cell fxFlex="10" (click)="selectAllUsers()" *matHeaderCellDef>
          <mat-checkbox [(ngModel)]="checkedAllUsers"></mat-checkbox>
        </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let element">
          <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="firstName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> First Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.firstName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="lastName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> Last Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.lastName}} </mat-cell>
      </ng-container>

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

      <ng-container matColumnDef="actions">
        <mat-header-cell fxFlex="10" *matHeaderCellDef> Action </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let row; let i=index;">
          <button mat-icon-button class="viewButton" (click)="view(i, row.id, row.title, row.state, row.url, row.created_at, row.updated_at)">
            <mat-icon aria-label="Delete">remove_red_eye</mat-icon>
          </button>
        </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="allUsersColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: allUsersColumns;"></mat-row>
    </mat-table>
    <mat-paginator #allUsersPaginatorr [pageSizeOptions]="[10,20,30]" showFirstLastButtons></mat-paginator>

TS 代码:

 @ViewChild(MatPaginator) paginator: MatPaginator;

 allUsersColumns: string[] = ['checked', 'firstName', 'lastName', 'email', 
'actions'];
allUsersDataSource = new MatTableDataSource<any>();
 allUsers: any[] = [
{ checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 'd@gmail.com' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
 'w@yahoo.in' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
 'randy@gmail.com' },
  { checked: true, firstName: 'Chad', lastName: 'Spongla', email: 
   'c@redif.com' },
   { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
  'd@gmail.com' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
  'w@yahoo.in' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
  'randy@gmail.com' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 'c@redif.com' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 'd@gmail.com' },
    { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 'w@yahoo.in' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 'c@redif.com' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 'd@gmail.com' },
  { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 'w@yahoo.in' }
 ];
ngOnInit() {
 this.allUsersDataSource = new MatTableDataSource(this.allUsers);
  this.allUsersDataSource.paginator = this.paginator;
}

Answer 1

如果您的 mat-paginator 位于任何 ngIf 条件 block 内(如下面的代码所示)，则该表将显示第一页本身中的所有数据。

<div *ngIf="isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
   <mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
   </mat-paginator>
</div>

解决方案 1: 将 mat-paginator 代码块移到 ngIf 条件 block 之外，如下所示:

<div *ngIf="isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
</div>
<mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>

解决方案 2: 使用 hidden 作为 ngIf 指令的替代，如下所示:

<div [hidden]="!isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
   <mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
   </mat-paginator>
</div>

注意: 当然，遵循初始化 mat-table 数据和 mat-paginator 的强制步骤

this.dataSource = new MatTableDataSource(this.allUsers);
this.dataSource.paginator = this.paginator;

快乐编码...Cheerzz