Angular2 rxjs 按可观察字段对（可观察）对象列表进行排序

# 使用RxJS对Angular2中可观察对象列表进行排序

bash
npm install rxjs

typescript
import { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-sort-list',
  template: `
    
      
{{ item.name }}
    
  `,
})
export class SortListComponent {
  items$ = of([
    { name: 'Apple' },
    { name: 'Orange' },
    { name: 'Banana' },
  ]);
  sortedItems$ = this.items$.pipe(
    map(items => items.slice().sort((a, b) => a.name.localeCompare(b.name)))
  );
}

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-async-sort-list',
  template: `
    
      
{{ item.name }}
    
  `,
})
export class AsyncSortListComponent {
  items$ = of([
    { name: 'Apple' },
    { name: 'Orange' },
    { name: 'Banana' },
  ]);
  sortedItems$ = this.items$.pipe(
    switchMap(items =>
      from(items).pipe(
        concatMap(item =>
          of(item).pipe(
            delay(1000), // 模拟异步操作
            map(() => item)
          )
        ),
        toArray(),
        map(sortedItems =>
          sortedItems.sort((a, b) => a.name.localeCompare(b.name))
        )
      )
    )
  );
}