Paginateur multiple de matériau angulaire dans le même composant et vue

Avoir 2 tableaux en vue et afficher quelques graphiques avec les tableaux, tout fonctionne sauf le paginateur sur 2 tableaux. , qui prend les données de 2 sources. Lorsque le Paginateur de la table supérieure a cliqué sur la table inférieure modifie les données, le composant

a initialisé le paginateur et les tables avec les sources de données,

Mon Component.ts

<fury-list name="AWS Resources Expenditure" [columns]="columns" (filterChange)="onFilterChange($event)">
  <mat-table #table [dataSource]="dataSource" matSort>
    <ng-container *ngFor="let column of columns">
      <ng-container *ngIf="column.notCurrency" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property] }}
        </mat-cell>
      </ng-container>
      <ng-container *ngIf="!column.notCurrency" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property] | currency }}
        </mat-cell>
      </ng-container>
    </ng-container>
    <mat-header-row *matHeaderRowDef="visibleColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: visibleColumns;"></mat-row>
  </mat-table>
  <mat-paginator #paginator class="paginator" [pageSize]="10"></mat-paginator>
</fury-list>



<fury-list name="AWS EC2 Utilization (Past 120 days)" [columns]="utilizationColumns" (filterChange)="onFilterChangeU($event)">
  <mat-table #table [dataSource]="utilizationDataSource" matSort>

    <ng-container *ngFor="let column of utilizationColumns">
      <ng-container *ngIf="!column.isAvg" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{ { column.name }}</span> {{ row[column.property] }}
        </mat-cell>
      </ng-container>
      <ng-container *ngIf="column.isAvg" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property]}}
          <mat-icon *ngIf="row[column.property] < 10"> trending_down</mat-icon>
          <mat-icon *ngIf="row[column.property] > 70"> trending_up</mat-icon>
        </mat-cell>
      </ng-container>
    </ng-container>

    <mat-header-row *matHeaderRowDef="visibleColumnsU"></mat-header-row>
    <mat-row *matRowDef="let row; columns: visibleColumnsU;"></mat-row>
  </mat-table>
  <mat-paginator #paginatorU class="paginator" [pageSize]="5"></mat-paginator>
</fury-list>

Dans la vue ici seulement ajouté les tables, qui ont les paginateurs. Lorsque le paginateur en haut a la table retirée, le paginateur de table inférieur fonctionne. sinon seul le paginateur supérieur fonctionne, quand il clique sur le tableau inférieur change les données,

View.html

  export class FinancialMetricsComponent implements OnInit, AfterViewInit {

  pageSize = 20;
  dataSource: MatTableDataSource<SnowTicket> | null;
  utilizationDataSource: MatTableDataSource<Utilization> | null;

  @ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
  @ViewChildren(MatSort) sort = new QueryList<MatSort>();




ngOnInit() {

    this.changeDataAccordingToDate();
    this.dataSource = new MatTableDataSource();
    this.data$.pipe(
      filter(Boolean)
    ).subscribe((tickets) => {
      this.accountsData = tickets;
      this.dataSource.data = tickets;
    });

    this.pcsService.getUtilizationData('120').subscribe(resources => {
      this.utilizationSubject$.next(resources);
    });
    this.utilizationDataSource = new MatTableDataSource();
    this.utilizationData$.pipe(
      filter(Boolean)
    ).subscribe((tickets) => {
      this.utilizationData = tickets;
      this.utilizationDataSource.data = tickets;
    });
  }


  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator.toArray()[0];
    this.dataSource.sort = this.sort.toArray()[0];

    this.utilizationDataSource.paginator = this.paginator.toArray()[1];
    this.utilizationDataSource.sort = this.sort.toArray()[1];

    }
}