Angular2 rxjs de tri (observables) liste des objets par une observable champ
Je veux trier une liste de choses par un observables sur le terrain, mais ne peut pas envelopper la tête autour des observables pour obtenir ce travail. A quelqu'un à une idée comment faire?
La situation initiale est quelque chose comme ce qui suit:
Thing[] things;
interface Thing {
name: Observable<string>
}
<ul>
<li *ngFor="const thing for things">
{{thing.name | async}}
</li>
</ul>
Car évidemment je n'ai pas décrit mon problème correctement: Le domaine que je veux pour trier la liste des choses est un fait Observable, pas une chaîne simple. Je veux garder le champ est mis à jour avec les websockets, afin de détecter les changements correctement-je utiliser un Observables sur le terrain, sur lequel je peux vous abonner.
- Quelle est l'idée derrière avoir des nom comme un fait Observable<string>? Je pense que vous voulez laisser la propriété à la normale de la chaîne
- Je veux utiliser le terrain comme un fait observable, puisque c'est la valeur peut changer au moment de l'exécution.
- Phosphoros, vous n'êtes ni l'abonnement à la
name
ou unThing
, mais à la liste des choses (Observable<Thing[]>
) - Oui, vous avez raison, c'est une véritable erreur. L'abstraction de mon cas d'utilisation est incorrecte.
Vous devez vous connecter pour publier un commentaire.
Merci pour la clarification de la question, Phosphoros. 🙂
Voici comment vous pouvez faire ce que vous avez demandé:
Journalisation émises valeurs à la console affiche un tableau de Chose objets triés par leur
unwrappedName
propriété:S'il vous plaît laissez-moi savoir si vous avez des questions à propos de ce code.
compareFn
déclaration.Si je vous comprends bien, vous voulez avoir un objet qui ressemble à ceci:
Ensuite, vous aurez envie d'avoir une Observable qui tient sur tableau de
Thing
:Vous souhaitez trier vos choses dans la
thing array
par une propriété, dans ce casname
. Qui pourrait être fait de cette manière:Et puis finalement, comme Toung Le a montré, dans sa réponse, le changement de votre modèle comme celui-ci:
sorted$
? Dans lecomponent.ts
? Je veux appeler cette méthode à l'aide d'un clic de bouton<button (click)="this.sorted$()">Sort</button>
(si c'est possible, écrit comme vous l'avez).Vous pouvez utiliser
Observable.map
. Par exemple:Dans votre modèle:
Vous pouvez utiliser
Observable.map
puissort()
aveclocaleCompare
qui ressemblerait à quelque chose comme ceci :Utilisation
groupby
opérateur (jouer avec elle):Groupby docs.