web-dev-qa-db-ja.com

Angular mat-tableページネーションが機能せず、データ全体がmat-tableの最初のページに読み込まれます

Angular Material table、ts fileからバインドデータソースがありますが、すべてのデータが最初のページに読み込まれ、ページ付けが機能していません。さらに2つのテーブルがあります。同じページ、他のテーブルでも同じ問題。

私が試してみました

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: 
 '[email protected]' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[email protected]' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
 '[email protected]' },
  { checked: true, firstName: 'Chad', lastName: 'Spongla', email: 
   '[email protected]' },
   { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
  '[email protected]' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
  '[email protected]' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
  '[email protected]' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 '[email protected]' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 '[email protected]' },
    { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[email protected]' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 '[email protected]' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 '[email protected]' },
  { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[email protected]' }
 ];
ngOnInit() {
 this.allUsersDataSource = new MatTableDataSource(this.allUsers);
  this.allUsersDataSource.paginator = this.paginator;
}
typescriptangular7angular-flex-layoutangular-material-6
3
Jayant Belekar

This.allUsersDataSource .dataにデータを割り当てる必要があります。また、ページをテーブルに関連付けるには、ngAfterViewInitが必要です。コードを変更する

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;
}
3
boyukbas

テーブルのデータソースは、allUsersDataSourceではなくallUsersである必要があります。

だから変更：

<mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers">
                                                                     /\

に、

<mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsersDataSource">

Stackblitz

1
Prashant Pimpale