Le tri d'un tableau d'objets dans Angular2
J'ai des problèmes avec le tri d'un tableau d'objet dans Angular2.
Ressemble l'objet:
[
{
"name": "t10",
"ts": 1476778297100,
"value": "32.339264",
"xid": "DP_049908"
},
{
"name": "t17",
"ts": 1476778341100,
"value": "true",
"xid": "DP_693259"
},
{
"name": "t16",
"ts": 1476778341100,
"value": "true",
"xid": "DP_891890"
}
]
Et est stocké à l'intérieur de la values
variable.
Tout ce que je veux, c'est faire le *ngFor
boucle de trier par la name
propriété.
<table *ngIf="values.length">
<tr *ngFor="let elem of values">
<td>{{ elem.name }}</td>
<td>{{ elem.ts }}</td>
<td>{{ elem.value }}</td>
</tr>
</table>
Essayé de le faire avec des tuyaux, mais a échoué lamentablement.
Toute aide appréciée.
Plunker lien: https://plnkr.co/edit/e9laTBnqJKb8VzhHEBmn?p=preview
Modifier
Mon tuyau:
import {Component, Inject, OnInit, Pipe, PipeTransform} from '@angular/core';
@Component({
selector: 'watchlist',
templateUrl: './watchlist.component.html',
styleUrls: ['./watchlist.component.css'],
pipes: [ ArraySortPipe ]
})
@Pipe({
name: "sort"
})
export class ArraySortPipe implements PipeTransform {
transform(array: Array<string>, args: string): Array<string> {
array.sort((a: any, b: any) => {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
return array;
}
}
Et vient de mettre la pipe
nom dans le fichier html:
<tr *ngFor="let elem of values | sort">
ce que vous avez essayé jusqu'à présent? Pouvez-vous ajouter de la pipe vous avez essayé de l'écrire ici?
Le tuyau qui Ive fait ne fonctionne pas correctement, mais je vais l'ajouter dès que possible de la modifier.
merci. présenter votre travail dans important pour les personnes à être en mesure de vous aider. 🙂
Puisque vous êtes nouveau, il pourrait être utile de lire le comment demander à un guide, si vous n'avez pas déjà. stackoverflow.com/help/how-to-ask
peut-être que vous devriez essayer de tri sur le nom de la propriété. dans la flèche en fonction de la pipe ne et un.nom < b.nom. 🙂
Le tuyau qui Ive fait ne fonctionne pas correctement, mais je vais l'ajouter dès que possible de la modifier.
merci. présenter votre travail dans important pour les personnes à être en mesure de vous aider. 🙂
Puisque vous êtes nouveau, il pourrait être utile de lire le comment demander à un guide, si vous n'avez pas déjà. stackoverflow.com/help/how-to-ask
peut-être que vous devriez essayer de tri sur le nom de la propriété. dans la flèche en fonction de la pipe ne et un.nom < b.nom. 🙂
OriginalL'auteur | 2016-12-12
Vous devez vous connecter pour publier un commentaire.
Bien que vous pouvez résoudre ce problème avec un tuyau, vous devez vous demander si la ré-utilisabilité d'un tuyau est utile pour vous dans votre projet particulier. Allez-vous souvent besoin de trier les objets par le "nom" clé sur d'autres tableaux ou d'autres composants à l'avenir? Ces données changent assez souvent et qu'il leur est difficile de simplement de tri dans le composant? Aurez-vous besoin de la matrice de triés sur tout changement à la vue ou à des intrants?
J'ai créé un édité plunker dans lequel le tableau est trié dans le composant du constructeur, mais il n'y a pas de raison que cette fonctionnalité ne pouvait pas être déplacé dans sa propre méthode (sortValuesArray par exemple) pour ré-utiliser, si nécessaire.
Édité Plunker
Dans certains cas, le code pourrait être encore plus simple que
constructor() { this.values.sort(function(a, b){return a.ts - b.ts}); }
Ou
constructor() { this.values.sort((a, b) => {return a.ts - b.ts}); }
L'argument en faveur de cette approche est rendue à angulaire.io/guide/tuyaux: "Angulaire n'offre pas de tels tuyaux parce qu'ils fonctionnent mal ... Filtrage et surtout de tri sont des opérations coûteuses. L'expérience de l'utilisateur peut dégrader sévèrement de même taille modérée listes lorsque Angulaire appelle ces tuyaux méthodes plusieurs fois par seconde. de filtre et de tri ont souvent été victimes de mauvais traitements dans AngularJS apps, conduisant à des plaintes qui Angulaire en lui-même est lent... L'Angulaire de l'équipe et de nombreux expérimenté Angulaire développeurs vous recommandons fortement de déplacement de tri et de filtrage logique dans le composant lui-même."
OriginalL'auteur peterhuettl
Votre pipe s'attend à cordes, mais il obtient des objets, vous devez l'adapter:
Argument of type '{ selector: string; template: any; styles: any[]; pipes: typeof ArraySortPipe[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'.
C'est probablement en raison de la signature, mis à jour à accepter Array<aucun>, lui donner un essai.
Ici est presque l'ensemble de la
component.ts
fichier et le message d'erreur qui s'affiche: jsfiddle.net/ra7szrLn/1 C'est toujours quelque chose de mal, même si j'ai changé tout ce que vous avez dit.L'erreur est due à un problème de compilation sur jsfiddle ou alors j'ai loupé un truc? Pourquoi ne pas la fourche et de fixer l'origine plnkr?
Cette erreur est de webpack lors de la compilation de l'application. J'ai utilisé jsfiddle maintenant, parce que sur le plunker Ive posté minime et une version très simplifiée de mon code, sans les requêtes http. Je peux modifier l'original plunker si vous le souhaitez, mon ami.
OriginalL'auteur Meir
Essayer cette
De tri de A à la fin de alpahbet:
Z=>Un (ordre inverse)
Pas de vote, mais une explication du code de l'aide.
A=>Z
est-ce un raccourci pour une flèche de fonction? Peut-être préciser que "localeCompare" est une méthode intégrée pour l', y compris la langue des caractères spécifiques?Cela a fonctionné pour moi lorsqu'il est placé à l'intérieur du constructeur où le abonnez-vous, c'est: cette.foo.getBar().s'abonner(x => { cette.chose = x; ce.chose= (.chose || []).tri (a:, b: Chose) => un.nom.localeCompare(b.nom)); }); je vois que l'un=>z la chose a été de texte. Totalement confus pendant un moment 🙂
OriginalL'auteur suphi
Angulaire encore de conseil de ne pas utiliser de tuyaux pour le tri et le filtrage, comme dans angularJs.
Il va ralentir votre application, ont certains problèmes de performances. Il est beaucoup mieux de fournir votre tri dans votre composant avant de le transmettre au modèle.
La raison est expliquée sur https://angular.io/guide/pipes#no-filter-pipe
Si vous travaillez avec une belle structuré agencement des composants, vous pouvez le faire même sur te setter:
Utilisateur résultat sera le résultat de votre tableau trié. Vous venez de le réaffecter à autre chose
OriginalL'auteur Bo Vandersteene
C'est adaptable à tous ces cas d'utilisation.
Utilisation:-
<div *ngFor="let item of list | sortBy: 'isDir': true">
Mise à JOUR
Reportez-vous Les Bo réponse de tri et de filtrage dans les tuyaux n'est pas recommandé.
Checkout angulaire.io/guide/tuyaux#pas-filtre-pipe ce n'est pas une bonne pratique pour trier ici.
Bo Vandersteene , mise à Jour de ma réponse. Vous pouvez annuler votre vote. merci
OriginalL'auteur Vikas Gautam
simple, par exemple si vous disposez de cette matrice de l'objet:
et vous voulez avoir l'objet triés dans le code HTML avant, utilisez:
Par défaut, les chaînes sont classées par ordre alphabétique, et les numéros sont classés numériquement.
Si vous avez ce tableau avec les clés:
Utilisation:
Trier le tableau par "ville" DESC ordre:
Trier le tableau par "ville":
Évidemment ng-repeat est pour les vieilles versions d'angularJs, pour les dernières utilisations * ngFor
C'est pas une bonne pratique, ni dans angulaire 1.x ou Angulaire 2+
OriginalL'auteur Andres Pirona