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

问题描述

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

我试过了

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

和

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

HTML:

 <ng-container matColumnDef="checked"><mat-h​​eader-cell fxFlex="10" (click)="selectAllUsers()" *matHeaderCellDef><mat-checkbox [(ngModel)]="checkedAllUsers"></mat-checkbox></mat-h​​eader-cell><mat-cell fxFlex="10" *matCellDef="let element"><mat-checkbox [(ngModel)]="element.checked"></mat-checkbox></mat-cell></ng-容器><ng-container matColumnDef="firstName"><mat-h​​eader-cell fxFlex="25" *matHeaderCellDef>名字 </mat-h​​eader-cell><mat-cell fxFlex="25" *matCellDef="let element">{{element.firstName}} </mat-cell></ng-容器><ng-container matColumnDef="lastName"><mat-h​​eader-cell fxFlex="25" *matHeaderCellDef>姓氏 </mat-h​​eader-cell><mat-cell fxFlex="25" *matCellDef="let element">{{element.lastName}} </ng-容器><ng-container matColumnDef="email"><mat-h​​eader-cell fxFlex="30" *matHeaderCellDef>电子邮件 </mat-h​​eader-cell><mat-cell fxFlex="30" *matCellDef="let element">{{element.email}} </mat-cell></ng-容器><ng-container matColumnDef="actions"><mat-h​​eader-cell fxFlex="10" *matHeaderCellDef>动作</mat-h​​eader-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></mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="allUsersColumns"></mat-h​​eader-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','动作'];allUsersDataSource = new MatTableDataSource();所有用户:任何[] = [{ 选中:false，名字:'Debi'，姓氏:'Austin'，电子邮件:'[e-mail]' },{ 检查:假，名字:'吉米'，姓氏:'威廉姆斯'，电子邮件:'[e-mail]' },{ 选中:false，名字:'Randy'，姓氏:'Waif'，电子邮件:'[e-mail]' },{ 选中:true，名字:'Chad'，姓氏:'Spongla'，电子邮件:'[e-mail]' },{ 已检查:false，名字:'Debi'，姓氏:'Austin'，电子邮件:'[e-mail]' },{ 检查:假，名字:'吉米'，姓氏:'威廉姆斯'，电子邮件:'[e-mail]' },{ 选中:false，名字:'Randy'，姓氏:'Waif'，电子邮件:'[e-mail]' },{ 选中:false，名字:'Chad'，姓氏:'Spongla'，电子邮件:'[e-mail]' },{ 已检查:false，名字:'Debi'，姓氏:'Austin'，电子邮件:'[e-mail]' },{ 检查:真实，名字:'吉米'，姓氏:'威廉姆斯'，电子邮件:'[e-mail]' },{ 选中:false，名字:'Chad'，姓氏:'Spongla'，电子邮件:'[e-mail]' },{ 选中:false，名字:'Debi'，姓氏:'Austin'，电子邮件:'[e-mail]' },{ 检查:真实，名字:'吉米'，姓氏:'威廉姆斯'，电子邮件:'[e-mail]' }];ngOnInit() {this.allUsersDataSource = new MatTableDataSource(this.allUsers);this.allUsersDataSource.paginator = this.paginator;}

解决方案

如果您的 mat-paginator 位于任何 ngIf 条件块内，如下面的代码所示，然后该表格显示了第一页本身的所有数据.

<mat-table [dataSource]=dataSource">......</mat-table><mat-分页器[长度]=allUsers.length"；[pageSize]=5"[pageSizeOptions]=[5, 10, 20]"></mat-paginator>

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

<mat-table [dataSource]=dataSource">......</mat-table>
<mat-分页器[长度]=allUsers.length"；[pageSize]=5"[pageSizeOptions]=[5, 10, 20]"></mat-paginator>

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

<mat-table [dataSource]=dataSource">......</mat-table><mat-分页器[长度]=allUsers.length"；[pageSize]=5"[pageSizeOptions]=[5, 10, 20]"></mat-paginator>

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

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

快乐编码...Cheerzz

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.

I have tried

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

and

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 Code:

 @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;
}

解决方案

If your mat-paginator is inside any ngIf conditioned block as shown in the below code, then the table shows all the data in the first page itself.

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

Solution 1: Move the mat-paginator code block outside of the ngIf conditioned block as shown below:

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

Solution 2: Use hidden as alternative for ngIf directive as shown below:

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

Note: And of course, following mandatory steps for initializing mat-table data and mat-paginator

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

Happy Coding...Cheerzz

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