1
votes

Comment ignorer les valeurs NULL Tri dans la table de matériaux angulaire

J'ajoute une ligne dans le tableau, afin d'ajouter un nouvel enregistrement et je veux garder cette ligne en haut quel que soit l'en-tête de tri (asc, desc ou aucun).

Lorsqu'aucun ordre ou asc n'est défini, la ligne est en haut, mais lorsque l'ordre de descente est cliqué, la ligne va en bas.

Des idées sur la façon de conserver les valeurs nulles (le nouvel objet de ligne dans la source de données a des valeurs nulles pour le tri des colonnes) toujours en haut?

Aucune commande n'est OK: https://i.stack.imgur.com/J3Ou1.png

La commande Asc est également OK: https://i.stack.imgur.com/xFolC.png

Mais Order Desc N'EST PAS ok: https://i.stack.imgur.com/bsksj.png

angular angular-material sorting null mat-table

0 commentaires

3 Réponses :

0
votes

Le MatSortModule angulaire a une propriété appelée «deregister». Vous pouvez essayer d'ajouter cette propriété à la ligne que vous souhaitez supprimer de MatSortables

Source: https://material.angular.io/components/sort/api

0 commentaires

0
votes

Lorsque la valeur est null , vous pouvez la «remplacer» par un caractère qui trie après Z , par exemple omega (Î ©), en écrasant le mécanisme de tri.

this.dataSource.sortingDataAccessor = (item, key) => item[key] || 'Î©';

Le mécanisme de tri renverra la paire clé / valeur, mais lorsqu'aucune valeur n'est trouvée, il renverra le caractère oméga, mais pour le tri uniquement , il n'apparaîtra donc pas dans votre tableau.

0 commentaires

0
votes

J'ai eu un problème similaire, qui était "d'ignorer les valeurs nulles quand on clique sur le bouton de tri, pour qu'elles soient toujours imprimées à la fin du tableau". J'ai résolu le problème de cette façon:

sur masquage de la méthode sortingDataAccessor de MatTableDataSource
vérification de la valeur de protery de l'article
si la valeur est nulle, vérifier l'ordre de tri
selon l'ordre de tri: renvoyer une valeur (possible) la plus élevée / la plus basse afin que les lignes avec des valeurs nulles soient toujours à la fin du tableau (dans votre cas, vous inverseriez les valeurs renvoyées).

Voici un exemple de code:

this.rankingData = new MatTableDataSource();
this.rankingData.sortingDataAccessor = (item, property) => {
    if(null == item[property]) {
      if("desc" == this.sort.direction) return '\u0000'+'\u0000'+'\u0000';
    return '\uFFFF'+'\uFFFF'+'\uFFFF';
  }
  return item[property];
};

0 commentaires