15 votes

Comment trier par chaîne de date avec mat-sort-header?

J'ai une table de cas construite avec angular.material et j'ai besoin d'ajouter un tri par date. Mais ma date est de type string, donc elle se trie incorrectement. Comment remplacer le comportement par défaut de mat-sort-header. Et est-ce possible?

             Date d'inscription 
             {{element.regDate}} 

Et du côté TS :

sort: MatSort;
@ViewChild(MatSort)
set appBacon(sort : MatSort) {
    this.sort = sort;
    this.dataSource.sort = this.sort;
}
dataSource = new MatTableDataSource([]);

24voto

Sagar Kharche Points 780

Voici la solution :- Passer l'objet Date dans la fonction sortingDataAccessor qui s'assurera que les objets de dates seront triés correctement.

this.dataSource.sortingDataAccessor = (item, property) => {
  switch (property) {
    case 'fromDate': return new Date(item.fromDate);
    default: return item[property];
  }
};

MatTableDataSource dispose de sortingDataAccessor que nous pouvons personnaliser selon nos besoins.

7voto

Braden Brown Points 821

Je développe la réponse de Sagar Kharche. Vous devez remplacer le sortingDataAccessor sur MatTableDataSource.

this.dataSource.sortingDataAccessor = (item, property) => {
  switch (property) {
     case 'fromDate': return new Date(item.fromDate);
     default: return item[property];
  }
};

'item' est l'objet ObjectName dans 'dataSource: MatTableDataSource'

'property' est l'attribut matColumnDef="startDate" qui arrive.

Par exemple, vous pourriez avoir un objet comme suit:

export interface IPersonInfo {
    name: string,
    position: string,
    startDate: string,
    salary: string
}

Votre élément de table de dates ressemblerait à ceci:

     Date de Début 
     {{element.startDate}} 

Donc, lorsque vous cliquez sur l'en-tête pour trier par 'Date de Début', tous les objets sous la colonne startDate sont passés un par un dans la valeur 'item', tandis que 'startDate' dans matColumnDef="startDate" est passé comme valeur 'property' dans la fonction sortingDataAccessor.

Ainsi, avec la fonction sortingDataAccessor, vous pourriez remplacer chaque colonne individuellement.

this.dataSource.sortingDataAccessor = (item, property) => {
  switch (property) {
     case 'name': return item.name;
     case 'position': return item.position;
     case 'startDate': return item.startDate;
     case 'salary': return item.salary;
     default: return item[property];
  }
};

3voto

Akanksha Gaur Points 1559

Oui, tu peux.

Vous devez fournir une fonction au champ MatTableDataSource.sortData.

Vous pouvez trouver la signature et l'implémentation par défaut ici

Par exemple:

customSortData(data: T[], sort: MatSort): T[] {
 // sort.active vous indiquera si le tri est actif et pour quel headerid
 // sort.direction vous indiquera si le tri est 'asc' ou non
return data.sort((a, b) => {// Votre implémentation});
}

Il est toujours recommandé d'utiliser un type pour une table, plutôt que d'utiliser un tableau de type any. Vous pouvez définir votre interface pour la même chose.

En espérant que cela vous aide. :)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X