Issue
Have 2 tables in view and displaying some graphs along with the tables, everything works except the paginator on 2 tables. , which takes data from 2 sources. When the Paginator of upper table clicked the lower table changes the data,
component have initialized the paginator and tables with data sources,
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];
}
}
In view here only added the tables, that have the paginators. When the paginator in upper has table removed the lower table paginator works. else only the upper paginator works, when it clicked the lower table changes data,
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>
Solution
I would bind the paginators based on their template variable and not rely on the QueryList
to contain them in the proper order.
@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];
}
Answered By - Fabian Küng
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.