Question

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

     <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) {
      this.commonservice.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.

Answer 1

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

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) {
      this.commonservice.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

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

1 个答案: