如何使用排序选项？

Question

我从ngrx-store获取数据

getData$: Observable<IGetData>;

this.getData$ = this.store.select(
      fromStore.dataSelector.getNewData,
    );

// array example [
{id: number, name: string, btn: number, index: number},
{id: number, name: string, btn: number, index: number},
{id: number, name: string, btn: number, index: number}
]

在 HTML 我在*ngFor中使用它

<div *ngFor="let data of getData$ | async">
  <div>{{data.name}}</div>
</div>

我想通过ID直接在组件中PIPE orderby在视图中不推荐。

我试试这个，但我得到错误Property 'sort' does not exist on type

// descending
this.getData$.sort((a, b) => b.id - a.id); 

//ascending
this.getData$.sort((a, b) => a.id - b.id);

在这种情况下如何使用SORT选项？

谢谢

Answer 1

我不使用angular，所以我不确定答案。 但看起来您的数据不是数组。 我对来自 MongoDB 的一些数据有类似的问题，即使它是一个数组，它也被作为 object 传递。 您可以尝试将数据包装在Array.from()中，例如Array.from(this.getData$).sort((a, b) => a.id - b.id)

您还可以验证数据的类型以确保它是一个数组。 console.log((typeof((a, b) => a.id - b.id))

Answer 2

看看这个ngrx effets 。 由于您的getData$是Observable而不是Array您可以尝试这样的事情：

this.getData$ = this.getData$
  .pipe(
     map((data) => data.sort((a,b) => a.id - b.id))
  );

虽然我从未使用过ngrx，但我在文档中找到了一些以正确方式（ ngrx 适配器）操作（对您的实体进行排序）的东西。

Answer 3

不知道你在哪里看到不推荐的PIPE 。 但在您的情况下，您可以：使用 Angular pipe，或者像这样修改您的 Observable：

this.getData$ = this.store.pipe(
  select(fromStore.dataSelector.getNewData),
  map(data => [...data].sort((a, b) => b.id - a.id)),
);

sort修改数组，所以你应该用[...data]复制它