Несколько мат-таблиц с MatSort в одном компоненте

У меня есть 2 материала 2 таблицы в том же компоненте с сортировкой. Я не могу найти способ присвоить директиве MatSort собственную таблицу. Я могу использовать MatSort только в первой таблице, а вторая таблица не признает, что на нем есть MatSort. Кто-нибудь знает, как настроить две таблицы с сортировкой в ​​одном компоненте?

Я попытался определить 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>

Ответы

Ответ 1

Исправить это, так как после того, как вы определили ссылку ViewChild в DOM, вам нужно будет добавить после нее символ = "matSort".

Шаги:

  • Настройте экземпляры MatSort в своем компоненте и определите их в ваших зависимостях DataSource следующим образом:

    @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);

  • Определите ссылки ViewChild в DOM и установите их равными matSort (Примечание: атрибут matSort находится в теге mat-table):

    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>

Ответ 2

Edit:

Я считаю, что вам нужно:

@ViewChild(MatSort) sort: MatSort;

над вашим:

@ViewChild('hBSort') hBSort: MatSort;
@ViewChild('sBSort') sBSort: MatSort;

Тогда:

ngAfterViewInit() {
    this.hBSource.sort = this.sort;
    this.sBSource.sort = this.sort;
  }

Предполагая, что ваш HBDataSource и SBDataSource экспортируют MatTableDataSource();

Я ссылаюсь на эти источники:

https://material.angular.io/components/sort/overview https://github.com/angular/material2/blob/master/src/demo-app/table/table-demo.ts