同一组件中带有MatSort的多个mat-table [英] Multiple mat-table with MatSort within the same component
问题描述
我在同一组件中有2个物料2个表,并进行了排序.我找不到将MatSort指令分配给它自己的表的方法.我只能在第一个表上使用MatSort,而第二个表则无法识别出有MatSort.有谁知道如何在同一组件中对两个表进行排序?
I have 2 material 2 tables in the same component with sorting. I cannot find a way to assign the MatSort directive to its own table. I'm only able to use MatSort on the first table and the second table doesn't recognize there is a MatSort on it. Does anyone know how to configure two tables with sorting in the same component?
我尝试用不同的名称定义ViewChild,但这没有用.
I've tried defining the ViewChild with different names, but it didn't work.
@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>
推荐答案
此问题的解决方法是,在DOM中定义ViewChild引用后,需要确保在其后添加="matSort".
The fix to this is that after you define your ViewChild reference in the DOM your need to make sure to add the ="matSort" after it.
步骤:
-
在您的组件中设置MatSort实例,并在DataSource依赖项中对其进行定义,如下所示:
Set up MatSort instances in your component and define them in your DataSource dependencies like so:
@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);
在DOM中定义ViewChild引用,并将其设置为等于matSort(注意:matSort属性在mat-table标记上):
Define ViewChild References in the DOM and set them equal to matSort (Note: matSort attribute is on the mat-table tag):
Table 1
<mat-table #hBSort="matSort" [dataSource]="hBSource" matSort
style="min-width: 740px;">
***Table Rows and pagination***
</mat-table>
Table 2
<mat-table #sBSort="matSort" [dataSource]="sBSource" matSort
style="min-width: 1200px;">
***Table Rows and pagination***
</mat-table>
这篇关于同一组件中带有MatSort的多个mat-table的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!