如何使用排序選項？

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]復制它