angular - matpaginator 不适用于动态生成的 DataTable

Question

所以我正在做一个项目，我通过从 API 获取数据创建了一个数据表。我无法使用 MatPaginator 更新我的 dataTable ，所有数据仍显示在单个页面上，尽管我能够在 UI 中看到我的分页器并且它也在读取总数。我拥有但无法对 DataTable 进行分页的数据。我正在为 UI 使用 Angular 12 和 Angular Material。

下面是我的 .ts 文件。

export class ListUsersComponent implements OnInit  {

   

  @ViewChild(MatPaginator)  paginator: MatPaginator | any
@ViewChild (MatSort) sort : MatSort | any

  displayedColumns: string[] = ['Select All', 'id', 'name', 'username', 'email', 'Action'];


 listUsers: User[] = [];
  searchValue: string = '';
  filterTable: any = '';
  sortbyParam: any = "";
  sortdirection: any = 'asc';
  checks= false;
  dataSource : MatTableDataSource<User> | any
  

    constructor(private userService: UserService) { }


 ngOnInit(): void {

    this.userService.listUsers().subscribe((data: User[]) => {
      this.listUsers= data;
    });
 
    this.dataSource = new MatTableDataSource(this.listUsers); 
    this.dataSource.paginator =this.paginator;
       
  }

下面是我的html文件

PS-我设置时数据未显示在DataTable上[dataSource]= "dataSource"

<div class="wrapper">
    <mat-card>

        <mat-form-field class="searchInput">


            <input matInput type="search" placeholder="search" [(ngModel)]="searchValue">
            <button mat-raised-button color="accent" (click)="filter()">Search</button>
            <button mat-raised-button color="accent" (click)="clearFilter()">Clear</button>



        </mat-form-field>

        <select [(ngModel)]='sortbyParam'>
            <option value="name">Name</option>
            <option value="username">username</option>
            <option value="email">Email</option>

        </select>
        <button mat-raised-button color="accent" (click)="sortDirection()">Sort</button>
        <mat-card-title>

            <strong><em>User Details</em></strong>
            <h5 style="margin-left: 20px; padding-top: 10px;">
                <strong><em>Displaying {{listUsers.length}} Users</em></strong>
            </h5>
        </mat-card-title>

        <mat-card-content class="mat-elevation-z8">
            <table mat-table [dataSource]="listUsers
                  | searchfilter: filterTable | sortfilter:[sortbyParam ,sortDirection] " matSort>

                <ng-container matColumnDef="Select All" id="ngtablehead">
                    <th mat-header-cell *matHeaderCellDef><input type="checkbox" (change)="bulk($event)">Select All</th>
                    <td mat-cell *matCellDef="let element"><input type="checkbox" [checked]="checks"></td>
                </ng-container>


                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
                    <td mat-cell *matCellDef="let element "> {{element.id}} </td>
                </ng-container>


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


                <ng-container matColumnDef="username">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> UserName</th>
                    <td mat-cell *matCellDef="let element"> {{element.username}} </td>
                </ng-container>


                <ng-container matColumnDef="email">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
                    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
                </ng-container>

                <ng-container matColumnDef="Action">
                    <th mat-header-cell *matHeaderCellDef id='th'> Action </th>
                    <td mat-cell *matCellDef="let element"> <a [routerLink]="['..','view', element.id]">View</a> | <a
                            [routerLink]="['..','edit', element.id]">Edit</a> | <a
                            [routerLink]="['..','delete', element.id]">Delete</a> </td>
                </ng-container>

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

            </table>
            <mat-paginator [pageSize]="5" #paginator [pageSizeOptions]="[5, 10, 20]" [length]="listUsers.length"
                showFirstLastButtons></mat-paginator>
        </mat-card-content>


    </mat-card>
</div>