分页器无法在带角度材质表的多个表上工作

本文介绍了分页器无法在带角度材质表的多个表上工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的应用程序中带有mat-paginator的表很少.第一个表分页器(#paginatorregin)正常工作，第二个表分页器(#paginatorcountry)和排序不起作用，但基于我从json对象获得的值在分页表上应用了长度，在这里我在下面添加我的代码

I have few table in my application with mat-paginator. The first table paginator(#paginatorregin) working fine.The second table paginator(#paginatorcountry) and sorting is not working but length applied on pagination table based on how much value i got from json object, here i add my code below

<table mat-table [dataSource]="regionsDataSource" matSort> <ng-container matColumnDef="regions"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Regions</th> <td mat-cell *matCellDef="let element"> {{element.regions}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="regionsColumn"></tr> <tr mat-row *matRowDef="let row; columns: regionsColumn;"></tr> </table> <mat-paginator #paginatorregin [length]="regionsDataSource.length" [pageSize]="3" [pageIndex]="0" [pageSizeOptions]="[3,5,10]"showFirstLastButtons></mat-paginator> <table mat-table [dataSource]="countryDataSource" matSort> <ng-container matColumnDef="country"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Contry</th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="countryColumn"></tr> <tr mat-row *matRowDef="let row; columns: countryColumn;"></tr> </table> <mat-paginator #paginatorcountry [length]="countryDataSource.length" [pageSize]="10" [pageIndex]="0"[pageSizeOptions]="[10, 20, 40]" showFirstLastButtons> </mat-paginator> <mat-form-field> <mat-select placeholder="Regions" [(ngModel)]="adminsettingvalue.reginvalue" (ngModelChange)="regionChangeItem($event)" name="regindropdown"> <mat-option *ngFor="let region of regiondropdown" [value]="region.id"> {{region.viewValue}} </mat-option> </mat-select> component code: export interface Regions { regions: string; } const regionElememtData: Regions[] = [ { regions: 'Americas' }, { regions: 'Asia Pacific' }, { regions: 'Europe' }, { regions: 'Middle East' }, { regions: 'Africa' } ]; const countryDataSource = []; @ViewChild('paginatorregin') paginator: MatPaginator; @ViewChild('paginatorcountry') paginatorcountry: MatPaginator; @ViewChild(MatSort) sort: MatSort; regionsColumn: string[] = ['regions']; countryColumn: string[] = ['country']; regionsDataSource = new MatTableDataSource<Regions>(regionElememtData); countryDataSources = new MatTableDataSource(countryDataSource); ngOnInit() { this.regionsDataSource.paginator = this.paginator; this.regionsDataSource.sort = this.sort; } ngAfterViewInit() { this.countryDataSource.paginator = this.paginatorcountry; this.countryDataSource.sort = this.sort; } listOfCounty: any = []; countryDataSources = new MatTableDataSource(); regionChangeItem(eventvalue) { if (eventvalue == 1) { thismonservice.getAmericaList().subscribe(americavalue => { this.listOfCounty= americavalue; }) } this.countryDataSources.data = this.listOfCounty; } Here the first table working as expected with sort, pagination. Second table pagination value applied with json value length but it will display total value i add 10 data per page it's working the #paginatorcounty table.

推荐答案

您可以对两个不同的表使用两个matSort选择器，例如:

You can try by using two matSort selectors for two different table like:

HTML代码:

// For table 1 <table mat-table [dataSource]="regionsDataSource" #t1Sort="matSort" matSort> // Tr and other table related content </table> // For table 2 <table mat-table [dataSource]="countryDataSource" #t2Sort="matSort" matSort> // Tr and other table related content </table>

在TS中:

@ViewChild('paginatorregin') paginator: MatPaginator; @ViewChild('paginatorcountry') paginatorcountry: MatPaginator; @ViewChild('t1Sort') t1Sort: MatSort; // use two diff. sort for two table @ViewChild('t2Sort') t2Sort: MatSort; regionsColumn: string[] = ['regions']; countryColumn: string[] = ['country']; regionsDataSource = new MatTableDataSource<Regions>(regionElememtData); countryDataSource = new MatTableDataSource<Country>(countryElememtData); constructor() {} ngOnInit() { this.regionsDataSource.paginator = this.paginator; this.regionsDataSource.sort = this.t1Sort; this.countryDataSource.paginator = this.paginatorcountry; this.countryDataSource.sort = this.t2Sort; }

if (eventvalue == 1) { thismonservice.getAmericaList().subscribe(americavalue => { this.listOfCounty= americavalue; this.countryDataSources.data = this.listOfCounty; this.countryDataSource.paginator = this.paginatorcountry; // Add these two lines here this.countryDataSource.sort = this.t2Sort; }) }

WORKING DEMO