Nhiều bảng mat với MatSort trong cùng một thành phần

Question

Tôi có 2 tài liệu 2 bảng trong cùng một thành phần với phân loại. Tôi không thể tìm thấy một cách để gán chỉ thị MatSort cho bảng riêng của nó. Tôi chỉ có thể sử dụng MatSort trên bảng đầu tiên và bảng thứ hai không nhận ra có một MatSort trên đó. Có ai biết làm thế nào để cấu hình hai bảng với phân loại trong cùng một thành phần?

Tôi đã thử xác định ViewChild bằng các tên khác nhau, nhưng nó không hoạt động.

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

Answer 1

Việc sửa chữa này là sau khi bạn xác định tài liệu tham khảo ViewChild của bạn trong DOM nhu cầu của bạn để chắc chắn rằng để thêm = "matSort" sau nó.

bước:

1. Thiết lập trường MatSort trong thành phần của bạn và xác định chúng trong phụ thuộc DataSource của bạn như vậy:

   @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. Xác định Tài liệu tham khảo ViewChild trong DOM và đặt chúng bằng matSort (Lưu ý: thuộc tính matSort nằm trên thẻ bảng mat):

   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> 
   

Answer 2

Edit:

Tôi tin rằng bạn cần:

@ViewChild(MatSort) sort: MatSort; 

trên của bạn:

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

Sau đó:

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

Giả sử rằng HBDataSource và SBDataSource của bạn đều xuất MatTableDataSource();

Tôi đang tham khảo các nguồn:

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