Угловая нумерация мат-таблиц не работает, все данные загружаются на первую страницу мат-таблицы

Question

Я использую таблицу угловых материалов, у меня есть источник данных связывания из файла ts, но все данные загружаются на самой первой странице, разбиение на страницы не работает. У меня есть еще две таблицы, которые находятся на той же странице, та же проблема дляи другие таблицы.

Я пробовал

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

Вы должны назначить свои данные для 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;
}

Answer 2

Источник данных для таблицы должен быть 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