Plusieurs mat-table avec MatSort dans le même composant

Question

J'ai 2 matériaux 2 tables dans le même composant avec tri. Je ne trouve pas de moyen d'attribuer la directive MatSort à sa propre table. Je ne suis capable d'utiliser MatSort que sur la première table et la deuxième table ne reconnaît pas qu'il y a un MatSort dessus. Est-ce que quelqu'un sait comment configurer deux tables avec 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

         {{'list.domain' | translate}} 
         {{row.domain}} 

         {{'list.general' | translate}} 
         {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%) 

Table 2

         {{'list.domain' | translate}} 
         {{row.domain}} 

         {{'list.general' | translate}} 
         {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%)

Answer 1

La solution à cela est qu'après avoir défini votre référence ViewChild dans le DOM, vous devez vous assurer d'ajouter ="matSort" après.

Étapes:

1. Configurer les instances MatSort dans votre composant et les définir dans vos dépendances DataSource comme ceci :

   @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. Définir les références ViewChild dans le DOM et les égaler à matSort (Remarque : l'attribut matSort est sur la balise mat-table) :

   Table 1
   
               ***Table Rows and pagination***
   
   Table 2
   
               ***Table Rows and pagination***

Answer 2

Dans Angular 7, 9 et 10, vous avez besoin à la fois de both matSort et de la référence #sorter1="matSort":

Ensuite

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

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

Answer 3

Voici une solution fonctionnelle Angular 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 (Vue):

...

Tableau 2 (Vue):

...

Answer 4

Je recommanderais de créer un composant commun pour le tableau qui peut être utilisé à plusieurs endroits dans l'application. Comme le composant va créer une instance séparée de lui-même, le tableau mat ne conflictue pas avec leur fonctionnalité.

Dans ce cas, vous n'avez pas besoin de répéter le code pour 2 tableaux. Ci-dessous se trouve le composant de tableau commun que vous pouvez implémenter.

Home.component.ts

export class HomeComponent implements OnInit {
  public data1: any[];
  public data2: any[];
  constructor() {
  }
  ngOnInit() {
   this.data1 = [
    {domain: 'Bonjour1', gNum: 1, gPct: 'table-data1'},
    {domain: 'Bonjour2', gNum: 2, gPct: 'table-data2'},
    {domain: 'Bonjour3', gNum: 3, gPct: 'table-data3'},
    {domain: 'Bonjour4', gNum: 4, gPct: 'table-data4'},
    {domain: 'Bonjour5', gNum: 5, gPct: 'table-data5'},
    {domain: 'Bonjour6', gNum: 6, gPct: 'table-data6'},
    {domain: 'Bonjour7', gNum: 7, gPct: 'table-data7'},
   ];
   this.data2 = [
    {domain: 'Bonjour1', gNum: 1, gPct: 'table-data1'},
    {domain: 'Bonjour2', gNum: 2, gPct: 'table-data2'},
    {domain: 'Bonjour3', gNum: 3, gPct: 'table-data3'},
    {domain: 'Bonjour4', gNum: 4, gPct: 'table-data4'},
    {domain: 'Bonjour5', gNum: 5, gPct: 'table-data5'},
    {domain: 'Bonjour6', gNum: 6, gPct: 'table-data6'},
    {domain: 'Bonjour7', gNum: 7, gPct: 'table-data7'},
   ]
  }
}

Home.component.html

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;

  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

    Domain 
     {{row.domain}} 

    G Number 
     {{row.gNum}} 

    Global Pct 
     {{row.gPct}}

Answer 5

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 SBDataSource exportent tous les deux MatTableDataSource();

Je fais référence à ces sources :

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