在同一组件中使用 MatSort 的多个 mat-table

问题描述

我在同一个组件中有 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.

步骤:

1. 在您的组件中设置 MatSort 实例并在您的 DataSource 依赖项中定义它们，如下所示:

1. 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！