उसी घटक के भीतर मैट्सॉर्ट के साथ एकाधिक मैट-टेबल

Question

मेरे पास सॉर्टिंग के साथ एक ही घटक में 2 सामग्री 2 टेबल हैं। मुझे 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); 

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

इस को ठीक उसके बाद = "matSort" जोड़ने के लिए सुनिश्चित करने के लिए अपनी जरूरत आप डोम में अपने ViewChild संदर्भ को परिभाषित करने के बाद है यह।

कदम:

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. डोम में ViewChild संदर्भ परिभाषित करें और उन्हें matSort के बराबर सेट (नोट: matSort विशेषता मैट-टेबल टैग पर है):

   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

संपादित करें:

मुझे तुम्हारी जरूरत है विश्वास है:

@ViewChild(MatSort) sort: MatSort; 

अपने ऊपर

:

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

तब:

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

मानते हैं कि आपके एचबीडेटा स्रोत और एसबीडेटा स्रोत दोनों निर्यात MatTableDataSource();

मैं इन स्रोतों को संदर्भित कर रहा हूँ:

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