Question

我使用了Angular Material表，我从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

如果您的mat-paginator位于任何ngIf条件块中，如下面的代码所示，则该表将在首页本身中显示所有数据。

<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条件块之外，如下所示：

<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

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

Answer 3

您应将数据分配给this.allUsersDataSource。数据。 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 4

您应该像这样初始化分页器：

@ViewChild(MatPaginator, {static: true}) set matPaginator(paginator: MatPaginator) {
    this.dataSource.paginator = paginator;
}

Answer 5

在自己的组件中使用mat-table，定义ngAfterViewInit如

@Component({
  selector: 'app-topics',
  templateUrl: './topics.component.html',
  styleUrls: ['./topics.component.scss']
})
export class TopicsComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


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

您可以在父模板中嵌入 mat-table 组件（在本例中为延迟加载），例如

<ng-template matExpansionPanelContent>
    <app-topics> </app-topics>
</ng-template>

Answer 6

我的问题是分页器位于带有 ngIf 的 div 块内，具体取决于数据源。因此，当在 ngAfterViewInit() 中调用 constructionTime 时， this.paginator 未初始化。在我的情况下，由于后端响应时间，在调用 ngAfterViewInit 之后初始化 dataSource。解决方案是使用 [hidden] 更改 ngIf。在这种情况下，表和分页器在没有数据时不显示，但是 this.paginator 被初始化，所以当数据进来时它会被正确设置到数据源。

角形mat-table分页不起作用，整个数据加载在mat-table的首页上

6 个答案: