我在同一个组件中有两个material 表和两个排序表.我找不到方法将MatSort指令分配给它自己的表.我只能在第一张桌子上使用MatSort,而第二张桌子上没有MatSort.有人知道如何在同一个组件中配置两个排序表吗?
我try 过用不同的名称定义ViewChild,但没有成功.
@ViewChild('hBSort') hBSort: MatSort;
@ViewChild('sBSort') sBSort: MatSort;
this.hBSource = new HBDataSource(this.hBDatabase, this.hBPaginator,
this.hBSort);
this.sBSource = new SBDataSource(this.sBDatabase, this.sBPaginator,
this.sBSort);
Table 1
const displayDataChanges = [
this.hBPaginator.page,
this.hBSort.sortChange,
this._filterChange
];
Table 2
const displayDataChanges = [
this.sBPaginator.page,
this.sBSort.sortChange,
this._filterChange
];
Table 1
<mat-table #hBtable [dataSource]="hBSource" matSort style="min-width:
740px;">
<ng-container matColumnDef="domain">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.domain' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
</ng-container>
<ng-container matColumnDef="general">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.general' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%) </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="hBColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: hBColumns;"></mat-row>
</mat-table>
Table 2
<mat-table #sBSort [dataSource]="sBSource" matSort style="min-width: 1200px;">
<ng-container matColumnDef="domain">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.domain' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
</ng-container>
<ng-container matColumnDef="general">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.general' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%) </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="sBColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: sBColumns;"></mat-row>
</mat-table>