如何使用排序选项？

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

在超文本标记语言中，我在*ngFor中使用

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

我想通过ID直接在组件中使用orderby，因为不推荐直接在视图中使用orderBy PIPE。

我尝试了一下，但得到了错误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选项？

Thnx

Answer 1

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

您还可以验证数据类型，以确保它是一个数组。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 adapter)。

Answer 3

我不知道您在哪里看到不推荐使用PIPE。但是在你的例子中，你可以:使用一个角度管道，或者像这样修改你的Observable：

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

sort修改该数组，因此您应该使用[...data]对其进行拷贝