如何使用 rxjs 6 对 Angular 6 中的 Observable<Item[]> 进行排序？

Question

我只想根据我的 class 类型 'Category' 的可观察对象对数据进行排序。所以Observable我要排序

所以我用它升级到 Angular6 和 rxjs6。我知道的一个可能是简单的 Typescript 问题是我如何做一个 'sort' 操作，比如：

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

里面的新Angular6？我曾经在 5

var response = this.http.get<Category[]>(this.endpoint);
        .map((result: Response) => this.alphabetize(result));


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

而且效果很好。现在Angular要你用的HttpCLIENTModule和HttpClient更简单了：

var data = this.http.get<Category[]>(this.endpoint);

我只是将魔术 <(object)> 放在端点之前，它会为我完成。凉爽的。但是我没有看到您如何轻松地进入对象内部以使用 Source、Pipe、from、of 从中排序。我知道这可能很简单，我只是不知道其语法。

Answer 1

是：

this.http.get<Category[]>(this.endpoint).pipe(
  map(results => results.sort(...))
);

或者由于 sort 修改了现有数组，因此在 do/tap 中提供副作用在语义上更正确：

this.http.get<Category[]>(this.endpoint).pipe(
  tap(results => {
    results.sort()
  })
);

Answer 2

对于 angular12，当我尝试这个解决方案时它给了我这个错误。

TypeError: Cannot read property ‘sort’ of undefined TypeError: Cannot read property ‘sort’ of undefined

修复这个错误。我用了管道

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
  name: 'sortByDate'
})
export class SortByDatePipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    value = [...value]; // fixed to second error

    return value.sort((a, b) => new Date(b.date1).getTime() - new Date(a.date1).getTime());

  }

}

此时给出这个

TypeError: Cannot assign to read only property ‘0’ of object ‘[object Array]’ Error ?

我已经在上面的代码中解释过了，但是如果它没有解决错误，你可以检查 here。

这是html代码

<div *ngFor="let item of data$ | async | sortByDate">
//your code goes here
</div>

如何使用 rxjs 6 对 Angular 6 中的 Observable<Item[]> 进行排序？

How do you sort an Observable<Item[]> in Angular 6 with rxjs 6?

typescript

angular6

rxjs6