角形mat-table分页不起作用，整个数据加载在mat-table的第一页上 [英] Angular mat-table pagination not working, entire data is loaded on First page of mat-table

问题描述

我使用了Angular Material表，我从ts文件绑定了数据源，但是所有数据都加载到了第一页上，分页不起作用.我还有两个表，它们位于同一页上，对于同样的问题其他表格.

I have use Angular Material table, i have bind data source from ts file,but all the data is loaded on very first page, pagination is not working.I have two more table, which are on same page,same problem for other tables too.

我尝试过

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: 
 '[e-mail]' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[e-mail]' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
 '[e-mail]' },
  { checked: true, firstName: 'Chad', lastName: 'Spongla', email: 
   '[e-mail]' },
   { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
  '[e-mail]' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
  '[e-mail]' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
  '[e-mail]' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 '[e-mail]' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 '[e-mail]' },
    { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[e-mail]' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 '[e-mail]' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 '[e-mail]' },
  { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[e-mail]' }
 ];
ngOnInit() {
 this.allUsersDataSource = new MatTableDataSource(this.allUsers);
  this.allUsersDataSource.paginator = this.paginator;
}

推荐答案

您应将数据分配给this.allUsersDataSource.数据.ngAfterViewInit也是将分页器与表格相关联的必要条件.更改您的代码

You should assign your data to the this.allUsersDataSource.data. Also ngAfterViewInit is necessary to relate the paginator with the table. Change your code

ngOnInit() {
 this.allUsersDataSource = new MatTableDataSource(this.allUsers);
  this.allUsersDataSource.paginator = this.paginator;
}

使用

ngOnInit() {
     this.allUsersDataSource.data = new MatTableDataSource(this.allUsers);
}
ngAfterViewInit() {
      this.allUsersDataSource.paginator = this.paginator;
}

这篇关于角形mat-table分页不起作用，整个数据加载在mat-table的第一页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！