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

推荐答案

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

步骤:

  1. 在组件中设置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);
    
  2. 在DOM中定义ViewChild引用,并将其设置为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>   
    

Angular相关问答推荐

Angular - Bootstrap 5 Carbon不工作

angular:从模板中的可观察数组获取随机元素

如何go 除融合图中的拖尾水印?

Angular 17自定义指令渲染不起作用'

我们应该在Angular 从14升级到15的过程中也升级茉莉花和业力相关的依赖吗?

如何使用ANGLING HTTP.POST并将类型更改为键入的回复?

如何通过innerHtml在模板中显示动态插入的动感图标?

当快速拖动光标时会丢失元素 - Angular

JsPDF Autotable 将图像添加到列中出现错误:属性getElementsByTagName不存在

在指令中获取宿主组件的templateRef

Angular Signals 如何影响 RXJS Observables 以及在这种情况下变化检测会发生什么

以 Angular 形式添加动态控件失败

Angular 13 - 使用 PUT 时出现 400 错误(错误请求)

在ionic 5中获取url传递的参数

在更改检测之前调用创建的间谍

如何在 ngFor 循环中创建变量?

使用 Jasmine 和 Karma 对 Angular 进行单元测试,错误:无法绑定到xxx,因为它不是xxxxxx的已知属性.

Angular 2如何让子组件等待异步数据准备好

angular 2 http withCredentials

Angular2:将数组转换为 Observable