Angular 5 Mat分页器无法动态分页

时间:2018-08-18 17:55:52

标签: javascript angular pagination angular5 angular-material-5

我无法正确使用Mat-PAginator。我获得了垫子分页器长度和pagesize值的正确值。 M

y表数据来自带有后端=分页的API。所以问题是当我转到API的最后一页时,它会为我提供正确的页面大小值,但必须在mat-paginator的最后一页,但是mat-paginator显示下一页仍然有效。

<mat-table [dataSource]="data" width=100% matSort>

  <ng-container matColumnDef="mission_id">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Mission Identifier </mat-header-cell>
    <mat-cell *matCellDef="let row" [routerLink]="[row.id]"> {{row.mission_id}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="mission_type">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Mission Type </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.mission_type}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="mission_status">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Mission Status </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.mission_status}} </mat-cell
  </ng-container>


  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

</mat-table>
<mat-paginator [pageSize]="data_length" [length]="totalCount"
               (page)="mission_paginate($event)">
</mat-paginator>

ts文件

 ngOnInit() {

this.api.mission.search(this.search_param).subscribe(data => {
  this.data = data.results;
  this.totalCount = data.count;
  this.data_length = data.results.length;
  console.log(data.results.length);
  console.log(this.data_length);
});
this.api.customer.detail(this.search_param.customer).subscribe((res) => {
  this.customer = res
})
}

0 个答案:

没有答案