J'ai 2 matériaux 2 tables dans le même composant avec le tri. Je ne trouve pas le moyen d'attribuer la directive MatSort à sa propre table. Je ne peux utiliser que MatSort sur la première table et la deuxième table ne reconnaît pas qu'il contient un MatSort. Est-ce que quelqu'un sait comment configurer deux tables avec le tri dans le même composant?
J'ai essayé de définir ViewChild avec des noms différents, mais cela n'a pas fonctionné.
@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>
La solution à ce problème est qu'après avoir défini votre référence ViewChild dans le DOM, vous devez vous assurer d'ajouter le = "matSort" après celui-ci.
Pas:
Configurez les instances MatSort dans votre composant et définissez-les dans vos dépendances DataSource de la manière suivante:
@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);
Définissez les références ViewChild dans le DOM et réglez-les sur matSort (Remarque: l'attribut matSort figure sur la balise 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>
Modifier:
Je crois que vous avez besoin de:
@ViewChild(MatSort) sort: MatSort;
au dessus de votre:
@ViewChild('hBSort') hBSort: MatSort;
@ViewChild('sBSort') sBSort: MatSort;
Ensuite:
ngAfterViewInit() {
this.hBSource.sort = this.sort;
this.sBSource.sort = this.sort;
}
En supposant que votre HBDataSource et votre SBDataSource exportent tous deux MatTableDataSource ();
Je fais référence à ces sources:
https://material.angular.io/components/sort/overviewhttps://github.com/angular/material2/bob/master/src/demo-app/table/table demo.ts
Voici une solution de travail angulaire 6:
import { MatSort, MatTableDataSource } from '@angular/material';
...
@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;
...
Source de données 1:
this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;
Source de données 2:
this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;
...
Tableau 1 (Voir):
<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
Tableau 2 (Voir):
<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
Je recommanderais de créer un composant commun pour la table pouvant être utilisé à plusieurs endroits de l'application. Comme composant créera une instance distincte de celle-ci, la table mat ne sera pas en conflit de fonctionnalité.
Dans ce cas, vous n'avez pas besoin de répéter le code pour 2 tables. Vous trouverez ci-dessous le composant commun de la table que vous pouvez implémenter.
Accueil.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'},
]
}
}
Home.component.html
<app-table-component [data]='data1'></app-table-component>
<app-table-component [data]='data2'></app-table-component>
Table.component.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>