Angular Material Multiple Paginator в одном компоненте и представлении

Имейте 2 таблицы в поле зрения и отображайте некоторые графики вместе с таблицами, все работает, кроме пагинатора на 2 таблицах. , который берет данные из 2-х источников. Когда Paginator верхней таблицы щелкнул, нижняя таблица изменяет данные,

компонент инициализировал пагинатор и таблицы с источниками данных,

My Component.ts

  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];

    }
}

В поле зрения добавлены только те таблицы, у которых есть пагинаторы. Когда пагинатор в верхней таблице удален, пагинатор нижней таблицы работает. иначе работает только верхний пагинатор, при нажатии которого нижняя таблица меняет данные,

View.html

<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>