angular2 rxjs порядок (наблюдаемый) список объектов по наблюдаемому полю

Question

Я хочу отсортировать список вещей по наблюдаемому полю, но не могу обернуть голову вокруг наблюдаемых, чтобы заставить это работать. Кто-нибудь знает, как это достичь?

Исходная ситуация - это что-то вроде следующего.

Thing[] things; 

interface Thing { 
    name: Observable<string> 
} 

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

EDIT: Так как я, очевидно, не описал мою проблему правильно: поле я хочу, чтобы отсортировать список вещей на это Observable, а не простая строка. Я хочу, чтобы поле обновлялось через веб-порты, поэтому, чтобы правильно определить изменения, я должен использовать поле Observable, на котором я могу подписаться.

Answer 1

Спасибо за уточняющий вопрос, Фосфор. :)

Вот как вы могли бы сделать то, что вы просили:

// 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 испускаемые значения консоли покажет массив объектов Thing, отсортированных по их unwrappedName собственности:

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

Пожалуйста, дайте я знаю, если у вас есть вопросы об этом коде.

Answer 2

Вы можете использовать Observable.map. Например:

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

В шаблоне:

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

Answer 3

Если я вас правильно понял, вы хотите иметь объект, который выглядит следующим образом:

Thing { 
    name: string; 
} 

Вы тогда хотите имеют Наблюдаемое значение, которое имеет место на массиве Thing:

things$: Observable<Thing[]>; 

Затем вы хотите отсортировать ваши вещи в thing array за счет имущества, в данном случае name. Это может быть сделано так:

... 

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

... 

И, наконец, как Toung Ле показал в своем ответе, изменить шаблон, как это:

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