如何使用排序选项？

Question

I take data from 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}
]

And in HTML I use this in *ngFor

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

I want to orderby this by ID direct in component because orderBy PIPE directly in view is not recommendation.

I try this but I get error 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);

How to use in this case SORT options?

Thnx

Answer 1

I don't use angular, so I'm not sure of the answer. But it looks like your data is not array. I had similar issue with some data from MongoDB where even it was an array it was passed as an object. You can try wrapping data in Array.from() like Array.from(this.getData$).sort((a, b) => a.id - b.id)

You can also verify the type of data to make sure it's an array. console.log((typeof((a, b) => a.id - b.id))

Answer 2

Take a look at this ngrx effets . Since your getData$ is an Observable and not an Array you can try something like this:

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

Although I have never worked with ngrx, I have found something in the docs for manipulating (sorting your entities) the proper way ( ngrx adapter ).

Answer 3

I don't know where did you see that PIPE is not recommended. But in your case, you can: Use an Angular pipe, or modify your Observable like this:

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

sort modify the array, so you should make a copy of it with [...data]