为什么服务器端对角材料表的分页不起作用？

Question

我已经做了所有调用http api的操作，并在Observable中获取数据并显示它。我正在控制台网络中获取数据，但是无法在mat-table中显示。

根据此博客，我已经这样做：https://blog.angular-university.io/angular-material-data-table/

OrderOverviewComponent.ts
export class OrderOverviewComponent implements AfterViewInit,OnInit {
   public dataSource: ordersDataSource;
   public displayedColumns = [
      { name: 'orderId', text: 'Order ID'},
      { name: 'name', text: 'Name',},
      { name: 'email', text: 'Email' },
      { name: 'mobile', text: 'mobile' }]
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild('TABLE') table:ElementRef;
   @ViewChild('input') input: ElementRef;
   constructor(private httpClient: HttpClient,private      ordersService:ordersService)
  ngOnInit() {
   this.dataSource = new ordersDataSource(this.ordersService);
   this.dataSource.loadorders('', 'asc', 0, 3);
  }
 ngAfterViewInit() {}
 loadorderPage() {}

OrderOverviewComponent.html

<div fxLayout fxLayoutAlign="left left">
    <mat-form-field fxFlex="15%" class="filter">
      <input matInput type="text"  placeholder="Filter" #input>
    </mat-form-field>
    <mat-form-field>
    <mat-label>Columns to display</mat-label>
      <mat-select multiple [(ngModel)]="columnsToDisplay">
        <mat-option *ngFor="let Columns of displayedColumns"  [value]="Columns">
          {{Columns.text}}
        </mat-option>
      </mat-select>
      </mat-form-field> 
  </div>

  <div class="example-container mat-elevation-z8" #TABLE>
  <table mat-table  [dataSource]="dataSource" class="mat-elevation-z8"
  matSort matSortActive="orderId" matSortDirection="asc" matSortDisableClear>
    <ng-container [matColumnDef]="column.name" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.text}}</th>
      <td mat-cell *matCellDef="let element">
         <a *ngIf="column.name === 'orderId'" (click)="onRowClicked(element.orderId)" class="order-link">{{element[column.name]}}</a>
         <span *ngIf="column.name !== 'orderId'">{{element[column.name]}}</span>
     </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="getColumnsToDisplay()"></tr>
    <tr mat-row *matRowDef="let row; columns: getColumnsToDisplay();"></tr>
  </table>

  <mat-paginator [length]="12" [pageSize]="3"
                   [pageSizeOptions]="[3, 5, 10]"></mat-paginator>
  </div>