Angular Material Table 分页不起作用，即使显示了分页器，也会列出所有行

如何解决Angular Material Table 分页不起作用，即使显示了分页器，也会列出所有行

我正在尝试对有角度的材料表进行分页。该表目前具有虚拟静态数据，将来一旦后端 api 准备就绪，它将被调用以填充该表。目前，该表未将数据显示为分页。即使 Angular 材质分页器显示在表格底部，也会显示所有行。我尝试了所有相关的堆栈溢出答案，但即使显示了分页器，表格仍然显示了整个数据。下面的代码是从angular material example复制的相同代码，我在新组件中使用了相同的代码，只是列名不同。

home-component.html

<div class="col-12">
  <table mat-table class="mat-elevation-z8" [dataSource]="dataSource">

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

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

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

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

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

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

home-component.ts

@Component({
  selector: 'home-component',styleUrls: ['home-component.css'],templateUrl: 'home-component.html',})
export class HomeComponent implements OnInit,AfterViewInit {
  displayedColumns: string[] = ['position','name','weight','symbol'];
  dataSource: MatTableDataSource<PeriodicElement>;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit(): void {
     this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  }

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

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1,name: 'Hydrogen',weight: 1.0079,symbol: 'H'},{position: 2,name: 'Helium',weight: 4.0026,symbol: 'He'},{position: 3,name: 'Lithium',weight: 6.941,symbol: 'Li'},{position: 4,name: 'Beryllium',weight: 9.0122,symbol: 'Be'},{position: 5,name: 'Boron',weight: 10.811,symbol: 'B'},{position: 6,name: 'Carbon',weight: 12.0107,symbol: 'C'},{position: 7,name: 'nitrogen',weight: 14.0067,symbol: 'N'},{position: 8,name: 'Oxygen',weight: 15.9994,symbol: 'O'},{position: 9,name: 'Fluorine',weight: 18.9984,symbol: 'F'},{position: 10,name: 'Neon',weight: 20.1797,symbol: 'Ne'},{position: 11,name: 'sodium',weight: 22.9897,symbol: 'Na'},{position: 12,name: 'Magnesium',weight: 24.305,symbol: 'Mg'},{position: 13,name: 'Aluminum',weight: 26.9815,symbol: 'Al'},{position: 14,name: 'Silicon',weight: 28.0855,symbol: 'Si'},{position: 15,name: 'Phosphorus',weight: 30.9738,symbol: 'P'},{position: 16,name: 'Sulfur',weight: 32.065,symbol: 'S'},{position: 17,name: 'Chlorine',weight: 35.453,symbol: 'Cl'},{position: 18,name: 'Argon',weight: 39.948,symbol: 'Ar'},{position: 19,name: 'Potassium',weight: 39.0983,symbol: 'K'},{position: 20,name: 'Calcium',weight: 40.078,symbol: 'Ca'},];