如何在垫子上应用分页

Question

我想对来自API的mat-table数据应用分页，但显示数据始终为空或null，dataSource = new MatTableDataSource（this.ListOfReceivedPurchaseOrder）;这是将数据映射到MatTableDataSource的正确方法吗？

<section style="margin-top: 10px;">
    <table mat-table [dataSource]="dataSource" class="table table-striped">

      <!-- Position Column -->
      <ng-container matColumnDef="Id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let element"> {{element.Id}} </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="ExpectedTime">
        <th mat-header-cell *matHeaderCellDef> Expected Time </th>
        <td mat-cell *matCellDef="let element"> {{element.ExpectedTime}} </td>
      </ng-container>
      <ng-container matColumnDef="ReceivedTime">
        <th mat-header-cell *matHeaderCellDef> Received Time </th>
        <td mat-cell *matCellDef="let element"> {{element.ReceivedTime}} </td>
      </ng-container>
      <!-- Weight Column -->
      <ng-container matColumnDef="Status">
        <th mat-header-cell *matHeaderCellDef>Status</th>
        <td mat-cell *matCellDef="let element"> {{element.Status}} </td>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="VendorName">
        <th mat-header-cell *matHeaderCellDef>Vendor Name</th>
        <td mat-cell *matCellDef="let element">{{element.VendorName}} </td>
      </ng-container>
      <ng-container matColumnDef="VendorContact">
        <th mat-header-cell *matHeaderCellDef>Vendor Contact</th>
        <td mat-cell *matCellDef="let element">{{element.Contact}} </td>
      </ng-container>
      <ng-container matColumnDef="SkuGroupName">
        <th mat-header-cell *matHeaderCellDef>Sku Group Name</th>
        <td mat-cell *matCellDef="let element">{{element.SkuGroupName}} </td>
      </ng-container>
      <ng-container matColumnDef="Edit">
        <th mat-header-cell *matHeaderCellDef> Edit</th>
        <td mat-cell *matCellDef="let element">
          <button mat-raised-button color="primary" (click)="openDialog(element.Id)">Detail</button>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="ReceivedPO"></tr>
      <tr mat-row *matRowDef="let row; columns: ReceivedPO;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 20]"  showFirstLastButtons></mat-paginator>
  </section>