角度分页在数据表中不起作用

Question

我正在尝试对数据表应用分页，但它没有按预期工作。

我一直在尝试通过@viewChild 应用分页。已导入必要的模块。

This is my code...


import {MatPaginator} from '@angular/material';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material';

OFFER_DATA = new MatTableDataSource<IOfferItems>(this.OFFER_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;

constructor(private _offerService: OfferService){}

ngOnInit() {
    this._offerService.getOffers()
      .subscribe((offerData) => {
        this.OFFER_DATA = offerData;
        this.OFFER_DATA.paginator = this.paginator;
      });
  }



HTML - 

<table mat-table [dataSource]="OFFER_DATA" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let offer"> {{offer.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let offer"> {{offer.name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      (click)="selection.toggle(row)">
  </tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>

Answer 1

使用#paginator作为

<mat-paginator
    #paginator
    [pageSizeOptions]="[5, 10, 15, 20]"
    showFirstLastButtons></mat-paginator>



@ViewChild(MatPaginator) paginator: MatPaginator;

这是我的示例代码 mat-table-sort-paginator-filter