Question

在视图中有2个表并显示一些图形和表，除2个表上的分页器外，其他所有东西都起作用。，它从2个来源获取数据。单击上方表格的分页器时，下方表格会更改数据，

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

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

Answer 1

如先前的回答所述，该组件应具有所需的分页器，并且应将其命名为：

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

Answer 2

如果希望它们独立工作，则需要定义两个不同的分页器。

Answer 3

我将根据分页符的模板变量来绑定分页符，而不是依靠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 4

在FinancialMetricsComponent上添加：

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

并添加公共功能

public handlePageBottom(event: PageEvent) {
    this.paginator.pageSize = event.pageSize;
    this.paginator.pageIndex = event.pageIndex;
    this.paginator.page.emit(event);
}

在HTML文件中放置了两个分页符：

<mat-paginator [length]="countItems" #paginator [pageSizeOptions]="[5, 10, 20, 50]"></mat-paginator>

<mat-table></mat-table>

<mat-paginator (page)="handlePageBottom($event)" [pageSize]="paginator.pageSize"
                   [pageIndex]="paginator.pageIndex" [length]="paginator.length"
                   [pageSizeOptions]="paginator.pageSizeOptions"></mat-paginator>

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

4 个答案: