Mehrere Matte-Tabelle mit MatSort innerhalb der gleichen Komponente

Ich habe 2 material 2 Tabellen in der gleichen Komponente mit der Sortierung. Ich kann nicht einen Weg finden, weisen Sie die MatSort Richtlinie, um Ihre eigene Tabelle. Ich bin nur in der Lage zu verwenden MatSort in der ersten Tabelle und der zweiten Tabelle nicht erkennt, es ist ein MatSort auf Sie. Weiß jemand, wie konfigurieren Sie zwei Tabellen mit Sortierung in der gleichen Komponente?

Habe ich versucht, die Definition der ViewChild mit unterschiedlichen Namen, aber es hat nicht funktioniert.

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

InformationsquelleAutor Derek J. | 2017-11-13

angular angular-material2

24

Fix ist, dass nach dem definieren der ViewChild Referenz im DOM brauchen, um stellen Sie sicher, dass Sie das ="matSort" nach.

Schritte:
1. Eingerichtet MatSort Instanzen der Komponente aus und definieren Sie in Ihrer Datenquelle Abhängigkeiten etwa so:
```
@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. Definieren ViewChild Referenzen in der DOM-und legen Sie gleich matSort (Hinweis: matSort Attribut ist auf der Matte-table tag):
```
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>   
```
- Auch, wenn Sie das Kind versteckt auf Start, müssen Sie möglicherweise andere tricks, siehe github.com/angular/material2/issues/10205
- Wenn die Tabellen ausgeblendet sind mit *ngIf, dann ja, weil die ViewChild Referenz existiert nicht in der DOM. Wenn die Tabellen ausgeblendet sind mit [hidden], dann sollte es ohne Probleme funktionieren.
InformationsquelleAutor Derek J.
5

Edit:

Ich glaube, Sie brauchen:
```
@ViewChild(MatSort) sort: MatSort;
```
oben Ihr:
```
@ViewChild('hBSort') hBSort: MatSort;
@ViewChild('sBSort') sBSort: MatSort;
```
Dann:
```
ngAfterViewInit() {
    this.hBSource.sort = this.sort;
    this.sBSource.sort = this.sort;
  }
```
Davon aus, dass Ihr HBDataSource und SBDataSource sowohl export MatTableDataSource();

Ich bin auf diese Quellen:

https://material.angular.io/components/sort/overview
https://github.com/angular/material2/blob/master/src/demo-app/table/table-demo.ts
- Wäre das nicht, erstellen Sie einfach ein Verweis auf eine Art Richtlinie werden, da @ViewChild(MatSort) Art: MatSort; nur Referenzen der Matte-Tabelle mit den matSort-Attribut. Ich habe es versucht, aber es hat nicht funktioniert 🙁
- Ah, sorry, mein Fehler. Es scheint, was ich gesagt habe, erfordert, Sie zu ändern, wie, die Sie anwenden, die Art auf die Tische. Ich war das verweisen auf diesen: material.eckig.io/Komponenten/sort/überblick Vielleicht, die helfen könnten. Es ist auch dieses demo: github.com/angular/material2/blob/master/src/demo-app/table/...
InformationsquelleAutor Brian Wright

Hier ist eine Eckige 6 funktionierende Lösung:

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

...

@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;

...

Datenquelle 1:

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

Datenquelle 2:

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

...

Tabelle 1 (Ansicht):

<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

Tabelle 2 (View):

<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

InformationsquelleAutor George Cs.

Im Winkel 7, müssen Sie both matSort und die Referenz #sorter1="matSort":

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

Dann

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


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

InformationsquelleAutor TiyebM

Ich würde empfehlen, auf die Schaffung einer gemeinsamen Komponente für die Tabelle, die verwendet werden können, an mehreren stellen in der Anwendung. Als Komponente erstellt die separate Instanz, Matte Tisch hat keine Konflikte gibt-Funktionalität.

In diesem Fall brauchen Sie nicht zu wiederholen Sie den code für die 2 Tabellen. Unten ist Tisch, gemeinsame Komponente, die Sie implementieren können.

Hause.Komponente.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'},
   ]
  }
}

Home.component.html

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

Tabelle.Komponente.ts

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

}

Table.component.html

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

Ich Stimme der Verwendung einer Komponente ist immer besser. In meinem Fall werden die Daten Spalten für jede Tabelle waren sehr unterschiedlich, so dass für diese Zwecke ich habe nicht eine Komponente, die jedem Tisch teilen konnten. Obwohl, ich könnte eine Komponente, die dynamische Spalten und Daten-Klassen. Vielen Dank für eine andere Sicht!

InformationsquelleAutor Sagar Kharche

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.