Solución:
Gracias por aclarar la pregunta, Phosphoros. 🙂
Así es como puede hacer lo que pidió:
// Function to compare two objects by comparing their `unwrappedName` property.
const compareFn = (a, b) => {
if (a.unwrappedName < b.unwrappedName)
return -1;
if (a.unwrappedName > b.unwrappedName)
return 1;
return 0;
};
// Array of Thing objects wrapped in an observable.
// NB. The `thing.name` property is itself an observable.
const thingsObs = Observable.from([
{ id: 1, name: Observable.of('foo') },
{ id: 2, name: Observable.of('bar') },
{ id: 3, name: Observable.of('jazz') }
]);
// Now transform and subscribe to the observable.
thingsObs
// Unwrap `thing.name` for each object and store it under `thing.unwrappedName`.
.mergeMap(thing =>
thing.name.map(unwrappedName => Object.assign(thing, {unwrappedName: unwrappedName}))
)
// Gather all things in a SINGLE array to sort them.
.toArray()
// Sort the array of things by `unwrappedName`.
.map(things => things.sort(compareFn))
.subscribe();
El registro de valores emitidos en la consola mostrará una matriz de objetos Thing ordenados por su unwrappedName
propiedad:
[
{ id: 2, name: ScalarObservable, unwrappedName: "bar" },
{ id: 1, name: ScalarObservable, unwrappedName: "foo" },
{ id: 3, name: ScalarObservable, unwrappedName: "jazz" }
]
Por favor, avíseme si tiene preguntas sobre este código.
Si te entiendo correctamente, quieres tener un objeto que se vea así:
Thing {
name: string;
}
Luego, debe tener un Observable que se mantenga en una matriz de Thing
:
things$: Observable<Thing[]>;
A continuación, desea ordenar sus cosas en el thing array
por una propiedad, en este caso name
. Eso podría hacerse así:
...
let sorted$: Observable<Thing[]> = things$.map(items => items.sort(this.sortByName))
...
sortByName(a,b) {
if (a.name < b.name)
return -1;
if (a.name > b.name)
return 1;
return 0;
}
...
Y luego, finalmente, como Toung Le mostró en su respuesta, cambie su plantilla de esta manera:
<ul>
<li *ngFor="let thing of sorted$ | async">
{{thing.name}} <!--No need async pipe here. -->
</li>
</ul>
Puedes usar Observable.map
. Por ejemplo:
Observable<Thing[]> things;
sortedThings$ = things.map(items => items.sort()) // Use your own sort function here.
En tu plantilla:
<ul>
<li *ngFor="let thing of sortedThings$ | async">
{{thing.name}} <!--No need async pipe here. -->
</li>
</ul>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)