angular2 rxjs Ordnung (beobachtbar) Liste der Objekte, die von einem beobachtbaren Bereich

Question

ich eine Liste der Dinge von einer beobachtbaren Feld sortiert werden soll, kann aber nicht den Kopf wickelt um Observablen diese Funktion zu erhalten. Hat jemand eine Idee wie man das erreicht?

Die Ausgangssituation ist in etwa wie folgt.

Thing[] things; 

interface Thing { 
    name: Observable<string> 
} 

<ul> 
    <li *ngFor="const thing for things"> 
    {{thing.name | async}} 
    </li> 
</ul> 

EDIT: Da ich offensichtlich nicht mein Problem richtig beschrieben: Das Feld ich auf die Liste der Dinge sortieren will, ist ein beobachtbares, keine einfacher String. Ich möchte das Feld über Websockets aktualisiert halten, um die Änderungen richtig zu erkennen. Ich muss ein Observable-Feld verwenden, auf dem ich mich anmelden kann.

Answer 1

Dank für die Klärung der Frage, Phosphoros. :)

Hier ist, wie Sie tun können, was Sie gefragt:

// 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(); 

Logging emittierten Werte an die Konsole wird durch ihre unwrappedName Eigenschaft ein Array von Thing Objekte geordnet zeigen:

[ 
    { id: 2, name: ScalarObservable, unwrappedName: "bar" }, 
    { id: 1, name: ScalarObservable, unwrappedName: "foo" }, 
    { id: 3, name: ScalarObservable, unwrappedName: "jazz" } 
] 

Bitte lassen Ich weiß, wenn Sie Fragen zu diesem Code haben.

Answer 2

Sie können Observable.map verwenden. Zum Beispiel:

Observable<Thing[]> things; 
sortedThings$ = things.map(items => items.sort()) // Use your own sort function here. 

in Ihrer Vorlage:

<ul> 
    <li *ngFor="let thing of sortedThings$ | async"> 
    {{thing.name}} <!--No need async pipe here. --> 
    </li> 
</ul> 

Answer 3

Wenn ich Sie richtig verstehe, Sie wollen ein Objekt haben, die wie folgt aussieht:

Thing { 
    name: string; 
} 

Sie dann wollen, müssen habe ein Observable, das auf Array von hält:

things$: Observable<Thing[]>; 

Sie möchten dann Ihre Sachen in der thing array durch eine Eigenschaft, in diesem Fall name sortieren.

... 

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; 
} 

... 

Und dann schließlich, wie Toung Le zeigte in seiner Antwort, ändern Sie Ihre Vorlage wie folgt aus:: Das könnte so gemacht werden

<ul> 
    <li *ngFor="let thing of sorted$ | async"> 
    {{thing.name}} <!--No need async pipe here. --> 
    </li> 
</ul>