Имеют в виду 2 таблицы и отображают некоторые графики вместе с таблицами, все работает, кроме разбивки на 2 таблицы., который берет данные из 2 источников.Когда Paginator верхней таблицы нажал на нижнюю таблицу, изменились данные, компонент
инициализировал 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];
}
}
В представленные здесь добавлены только таблицы, в которых есть страницы.Когда у paginator в верхней части есть стол, нижний paginator стола работает.иначе работает только верхняя страница, при нажатии на нижнюю таблицу изменяются данные,
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>