Angular 从API动态加载MAT表数据时禁用分页

import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';

@Component({
  selector: 'app-test-api',
  templateUrl: './test-api.component.html',
  styleUrls: ['./test-api.component.css'],
  standalone: true,
  imports: [MatTableModule, MatPaginatorModule]
})
export class TestAPIComponent implements OnInit, AfterViewInit {
  public displayedColumns: string[] = ['id', 'name', 'email', 'city', 'latitude'];
  public getJsonValue: any;
  public dataSource: any = [];
//code for pagination: tried all solutions from stackoverflow , none worked
@ViewChild(MatPaginator) paginator: MatPaginator;
  //@ViewChild(MatPaginator, {read: true}) paginator: MatPaginator;
  
  /*@ViewChild(MatPaginator, {static: false})
  set paginator(value: MatPaginator) {
    this.dataSource.paginator = value;
  } */

  /*@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.dataSource.paginator = this.paginator;
}*/
  
  constructor(private http : HttpClient){

  }
  ngOnInit(): void {
    this.getMethod();
    //this.cdr.detectChanges();
  }

  public getMethod(){
    this.http.get('https://jsonplaceholder.typicode.com/users').subscribe((data) => {
      console.table(data);
      console.log(this.paginator);
      this.getJsonValue = data;
      this.dataSource = data;
      //tried below code from stackoverflow but didn't work and commented ngAfterViewInit code
      this.dataSource.paginator = this.paginator;
    });
    
  }

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

<p>test-api works!</p>
<H1>Test API</H1>
<!--p>{{getJsonValue | json}}</p-->

<h1>Test API: Dynamic</h1>
<p>dynamic-table works!</p>

<div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource">
  
      <!-- 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="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
  
      <!-- Weight Column -->
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef> email </th>
        <td mat-cell *matCellDef="let element"> {{element.email}} </td>
      </ng-container>
  
      <!-- Symbol Column -->
      <ng-container matColumnDef="city">
        <th mat-header-cell *matHeaderCellDef> city </th>
        <td mat-cell *matCellDef="let element"> {{element.address.city}} </td>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="latitude">
        <th mat-header-cell *matHeaderCellDef> Latitude </th>
        <td mat-cell *matCellDef="let element"> {{element.address.geo.lat}} </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]"
    [pageSize]="5"
                   showFirstLastButtons
                   aria-label="Select page of periodic elements">
    </mat-paginator>
  </div>