同一组件和视图中的角度材质多个分页器

Question

有 2 个表格在视图中，并与表格一起显示一些图表，除了 2 个表格上的分页器外，一切正常。，它从 2 个来源获取数据。当上表的分页器单击下表更改数据时，

组件已经用数据源初始化了分页器和表格，

我的组件.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];

    }
}

这里只添加了带有分页器的表格。当上部的分页器移除桌子时，下部的分页器工作。否则只有上分页器工作，当它点击下表更改数据时，

查看.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>

Answer 1

我会根据模板变量绑定分页器，而不是依赖于QueryList以正确的顺序包含它们。

@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('paginatorU') paginatorU: MatPaginator;

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

Answer 2

正如前面的答案中提到的，组件应该有尽可能多的分页器，它们应该被命名为：

@ViewChild('firstPaginator', {static: true}) firstPaginator: MatPaginator;
@ViewChild('secondPaginator', {static: true}) secondPaginator: MatPaginator;

视图应该调用这些分页器：

    <mat-paginator #firstPaginator [pageSize]="5"></mat-paginator>

    <mat-paginator #secondPaginator [pageSize]="5"></mat-paginator>