Angular 6+RxJS 6中如何对Observable<Category[]>进行排序？

没问题，我来帮你把之前的排序逻辑迁移到RxJS 6的写法上！

首先要明确两个关键变化：

• RxJS 6开始，所有操作符都需要通过pipe()方法串联，不再直接链式调用在Observable对象上
• Angular的HttpClient已经自动帮你解析JSON响应并映射到指定的类型（这里就是Category[]），所以不需要再调用result.json()了

完整实现代码 #

首先确保你导入了需要的RxJS操作符：

import { map } from 'rxjs/operators';

然后就可以通过pipe()结合map操作符来处理排序：

// 定义获取并排序数据的方法
getSortedCategories() {
  return this.http.get<Category[]>(this.endpoint).pipe(
    // 在map操作符里对返回的数组执行排序
    map(categories => 
      categories.sort((x, y) => x.description.localeCompare(y.description))
    )
  );
}

调用并赋值的方式 #

当你需要把排序后的数据赋值给this.Categories时，订阅这个Observable即可：

this.getSortedCategories().subscribe(sortedCategories => {
  this.Categories = sortedCategories;
});

补充说明 #

我这里用了localeCompare()来替代你原来的三元运算符，它是JavaScript字符串的原生方法，更适合处理字符串排序场景——比如能正确处理带重音符号的字符、不同语言的排序规则，比手动判断更健壮。如果你坚持要用原来的逻辑，直接替换回去就行：

map(categories => 
  categories.sort((x, y) => x.description < y.description ? -1 : 1)
)

和Angular 5写法的对比 #

原来的写法需要手动解析JSON，且直接链式调用map：

// Angular 5 + RxJS 5.x的写法
var response = this.http.get(this.endpoint)
  .map((result: Response) => this.alphabetize(result));

alphabetize = (result: Response) => 
  this.Categories = result.json().sort((x,y) => x.description < y.description ? -1 : 1)

而RxJS 6的写法把操作符统一放到pipe()里，同时利用HttpClient的自动类型解析，代码更简洁规范。

内容的提问来源于stack exchange，提问作者djangojazz