Quel est le type de logique que je dois utiliser pour trier mes éléments?
Ici, je génère toutes les colonnes et les lignes.
Mes données sont dans un dynamic-table.component.html dynamic-table.component.ts mock.ts , je peux les trouver dans mon service. app.common.ts
3 Réponses :
Il y a une bonne bibliothèque pour cette
https://www.kryogenix.org / Code / Navigateur / Sortable / P>
C'est très facile à utiliser. P>
chargez simplement le script dans votre fichier HTML et modifiez votre en-tête pour ajouter de la sorte (avec un t) en classe, comme celui-ci: p>
<script src="sorttable.js"></script>
<table>
<tr>
<th *ngFor="let col of columns">{{col}}</th>
</tr>
<tr *ngFor="let user of users">
<td *ngFor="let col of columns">{{user[col]}}</td>
</tr>
</table>
Savez-vous s'il est possible de faire quelque chose de plus facile dans ma composante sans ajouter de JS?
Cette solution est déjà facile, il suffit d'ajouter 1 ligne pour inclure le fichier .js, ajoutez une classe à votre table HTML existante et à votre voile :) Que voulez-vous dire par plus facile? Personnellement, je crois que la réutilisation d'une bibliothèque existante est probablement meilleure / plus rapide que d'écrire vos propres fonctions de tri. Si vous le souhaitez, vous pouvez également essayer d'utiliser l'API de tri.
Je suis un fan de NGX-DataTable - une bibliothèque pour de belles tables avec tri et recherche.
Un exemple de Le tri est simplement d'ajouter une seule propriété à la
Vous pouvez écrire un tuyau qui prend les données et renvoie la Les données triées dans la manière dont vous préférez. et le tuyau myFilter faire quelque chose comme ceci:
N'est-il pas possible de faire quelque chose de plus facilement dans ma composante sans rien créer de nouveau?
Vous pouvez aussi le faire dans un composant aussi décrit ici: Stackoverflow.com/a/43524428/5017391
Yakubchick, je l'ai fait: Sortable (parm) {this.utilisateur.sort ((A, B) => A [Param] .Localecompare (B [Parm])); } Mais je ne peux pas inverser le tri et je ne peux pas trier les colonnes de nombres ... pourquoi?
Vous aurez peut-être besoin d'une fonction séparée qui trie dans l'autre sens (échange A et B près du localecompare Word). Si vous devez réinitialiser à la commande originale, vous devrez peut-être conserver une copie du tableau d'origine (voir le .slice (0) Trick i utilisé ci-dessus).
Bonjour Nathan, comme vous pouvez le lire, je ne peux pas utiliser de type de type mat, juste un événement Cliquez sur la méthode du composant avec une certaine logique de tri. J'ai vu la documentation sur l'en-tête de type mat, mais je suis débutant, je dois donc utiliser des choses de base.
Commencez par essayer Array.Prototype.sort () et tri
colonnes en fonction des conditions dont vous auriez besoin.Ici, je réponds à la question, cela fonctionne pour moi: Stackoverflow.com/a/54942025/10592616