Angular 同一组件内具有MatSort的多个mat表

我有两个材料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>

@ViewChild（'hBSort'）hBSort:MatSort；
@ViewChild（'sBSort'）sBSort:MatSort；
this.hBSource=新的HBDataSource（this.hBDatabase，this.hBPaginator，
这是(hBSort),；
this.sBSource=新的SBDataSource（this.sBDatabase，this.sBPaginator，
这是（sBSort）；
表1
const displayDataChanges=[
此.hBPaginator.page，
this.hBSort.sortChange，
这个.\u过滤器更换
];
表2
const displayDataChanges=[
此.sBPaginator.page，
这个.sBSort.sortChange，
这个.\u过滤器更换
];
表1
{{'list.domain'| translate}}
{{row.domain}}
{{'list.general'| translate}}
{{row.general.gNum}}（{{row.general.gPct}编号：'1.1-2'}}%）
表2
{{'list.domain'| translate}}
{{row.domain}}
{{'list.general'| translate}}
{{row.general.gNum}}（{{row.general.gPct}编号：'1.1-2'}}%）

编辑：

我相信你需要：

@ViewChild(MatSort) sort: MatSort;

在您的上方：

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

然后：

假设您的HBDataSource和SBDataSource都导出MatTableDataSource（）

我引用了以下来源：

---

解决方法是，在DOM中定义ViewChild引用后，需要确保在其后面添加=“matSort”

步骤：

在组件中设置MatSort实例，并在数据源依赖项中定义它们，如下所示：

@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标记上）：

表1
***表行和分页***
表2
***表行和分页***

---

我建议为表创建一个通用组件，它可以在应用程序中的多个位置使用。由于组件将创建它的单独实例，mat table并没有与这些功能冲突

在这种情况下，不需要为两个表重复代码。下表是您可以实现的通用组件

Home.component.ts

export class HomeComponent implements OnInit {
  public data1: any[];
  public data2: any[];
  constructor() {
  }
  ngOnInit() {
   this.data1 = [
    {domain: 'Hello1', gNum: 1, gPct: 'table-data1'},
    {domain: 'Hello2', gNum: 2, gPct: 'table-data2'},
    {domain: 'Hello3', gNum: 3, gPct: 'table-data3'},
    {domain: 'Hello4', gNum: 4, gPct: 'table-data4'},
    {domain: 'Hello5', gNum: 5, gPct: 'table-data5'},
    {domain: 'Hello6', gNum: 6, gPct: 'table-data6'},
    {domain: 'Hello7', gNum: 7, gPct: 'table-data7'},
   ];
   this.data2 = [
    {domain: 'Hello1', gNum: 1, gPct: 'table-data1'},
    {domain: 'Hello2', gNum: 2, gPct: 'table-data2'},
    {domain: 'Hello3', gNum: 3, gPct: 'table-data3'},
    {domain: 'Hello4', gNum: 4, gPct: 'table-data4'},
    {domain: 'Hello5', gNum: 5, gPct: 'table-data5'},
    {domain: 'Hello6', gNum: 6, gPct: 'table-data6'},
    {domain: 'Hello7', gNum: 7, gPct: 'table-data7'},
   ]
  }
}

@Component({
  selector: 'app-table-component',
  templateUrl: 'table.component.html',
  styleUrls: ['table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class TableComponent implements OnInit, OnChanges {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @Input() data: any[];
  public displayedColumns = ['domain', 'gNum', 'gPct'];
  public dataSource: MatTableDataSource<any>;

  constructor() {
  }

  public ngOnInit() {
    setTimeout(() => {
        this.dataSource = new MatTableDataSource(this.data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
   });
  }

  public ngOnChanges(changes: SimpleChanges) {
    this.dataSource = new MatTableDataSource(changes.data.currentValue);
  }

}

Home.component.html

 <app-table-component [data]='data1'></app-table-component>
 <app-table-component [data]='data2'></app-table-component>

   <mat-table #table [dataSource]="dataSource" matSort  matSortDisableClear matSortDirection="asc">
  <ng-container matColumnDef="domain">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Domain </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
  </ng-container>

 <ng-container matColumnDef="gNum">
    <mat-header-cell *matHeaderCellDef mat-sort-header>G Number </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.gNum}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="gPct">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Global Pct </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.gPct}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row  *matRowDef="let row; columns: displayedColumns;">
  </mat-row>
</mat-table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

表3.1.ts

export class HomeComponent implements OnInit {
  public data1: any[];
  public data2: any[];
  constructor() {
  }
  ngOnInit() {
   this.data1 = [
    {domain: 'Hello1', gNum: 1, gPct: 'table-data1'},
    {domain: 'Hello2', gNum: 2, gPct: 'table-data2'},
    {domain: 'Hello3', gNum: 3, gPct: 'table-data3'},
    {domain: 'Hello4', gNum: 4, gPct: 'table-data4'},
    {domain: 'Hello5', gNum: 5, gPct: 'table-data5'},
    {domain: 'Hello6', gNum: 6, gPct: 'table-data6'},
    {domain: 'Hello7', gNum: 7, gPct: 'table-data7'},
   ];
   this.data2 = [
    {domain: 'Hello1', gNum: 1, gPct: 'table-data1'},
    {domain: 'Hello2', gNum: 2, gPct: 'table-data2'},
    {domain: 'Hello3', gNum: 3, gPct: 'table-data3'},
    {domain: 'Hello4', gNum: 4, gPct: 'table-data4'},
    {domain: 'Hello5', gNum: 5, gPct: 'table-data5'},
    {domain: 'Hello6', gNum: 6, gPct: 'table-data6'},
    {domain: 'Hello7', gNum: 7, gPct: 'table-data7'},
   ]
  }
}

@Component({
  selector: 'app-table-component',
  templateUrl: 'table.component.html',
  styleUrls: ['table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class TableComponent implements OnInit, OnChanges {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @Input() data: any[];
  public displayedColumns = ['domain', 'gNum', 'gPct'];
  public dataSource: MatTableDataSource<any>;

  constructor() {
  }

  public ngOnInit() {
    setTimeout(() => {
        this.dataSource = new MatTableDataSource(this.data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
   });
  }

  public ngOnChanges(changes: SimpleChanges) {
    this.dataSource = new MatTableDataSource(changes.data.currentValue);
  }

}

@组件({
选择器：“应用程序表组件”，
templateUrl:'table.component.html'，
样式URL:['table.component.scss']，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类TableComponent实现OnInit、OnChanges{
@ViewChild（MatPaginator）分页器：MatPaginator；
@ViewChild（MatSort）排序：MatSort；
@输入（）数据：任意[]；
公共显示列=['domain'、'gNum'、'gPct']；
公共数据源：MatTableDataSource；
构造函数（）{
}
公共ngOnInit（）{
设置超时（（）=>{
this.dataSource=新MatTableDataSource（this.data）；
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
});
}
公共ngOnChanges（更改：SimpleChanges）{
this.dataSource=新MatTableDataSource（changes.data.currentValue）；
}
}

Table.component.html

 <app-table-component [data]='data1'></app-table-component>
 <app-table-component [data]='data2'></app-table-component>

   <mat-table #table [dataSource]="dataSource" matSort  matSortDisableClear matSortDirection="asc">
  <ng-container matColumnDef="domain">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Domain </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
  </ng-container>

 <ng-container matColumnDef="gNum">
    <mat-header-cell *matHeaderCellDef mat-sort-header>G Number </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.gNum}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="gPct">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Global Pct </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.gPct}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row  *matRowDef="let row; columns: displayedColumns;">
  </mat-row>
</mat-table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

领域
{{row.domain}}
G数
{{row.gNum}}
全球Pct
{{row.gPct}

以下是一个角度6工作解决方案：

import { MatSort, MatTableDataSource } from '@angular/material';

数据来源1：

this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;

数据来源2：

this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;

表1（视图）：

...

表2（视图）：

...

在角度7、9和10中，您需要

两个
matSort
和参考
\sorter1=“matSort”
：

这不就是创建对sort指令的另一个引用吗，因为@ViewChild（MatSort）sort:MatSort；仅引用带有matSort属性的mat表。我试过了，但没用：（啊，对不起，我的错。看来我所说的要求您更改将排序应用于表的方式。我引用了以下内容：也许这会有所帮助。还有一个演示：我同意使用组件总是更好。在我的情况下，每个表的数据列都非常不同，因此出于这些目的，我没有制作一个包含eac的组件h表可以共享。尽管如此，我可以制作一个具有动态列和数据类的组件。感谢您的另一个观点！此外，如果在启动时隐藏子级，您可能需要其他技巧，查看是否使用*ngIf隐藏表，然后是，因为ViewChild引用在DOM中不存在。如果使用[hidden]隐藏表，那么它应该不会有任何问题。我不知道为什么，我尝试了一个看起来完全相同的不同答案，这对我来说是有效的。谢谢。PS>我正在使用angular 8。这对我使用angular 9也非常有效。谢谢。在angular 10也有效。效果很好！！
<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

<table mat-table [dataSource]="ds1" matSort #sorter1="matSort">
</table>
<table mat-table [dataSource]="ds2" matSort #sorter2="matSort">
</table>

@ViewChild('sorter1') sorter1: MatSort;
@ViewChild('sorter2') sorter2: MatSort;


ngOnInit() {
this.ds1.sort = this.sorter1;
this.ds2.sort = this.sorter2;
}