NgRx-Entity-Selector in loop

Question

I have the following problem. Let's say I have a request to a server, which gives me a list of ids in a specific order. Other calls are loading the entities and I have them in a separate state:

So simplified my state is similar to this:

{
  topList: [ 7, 3, 1, 4 ],
  entities: { // basic ngrx-entity structure
    ids: ...
    entities: ...
  }
}

A also simplified version of the component looks like this.

@Component({
  selector: 'my-list-component',
  template: `
    <div *ngFor="let id in (toplist$ | async)">
      <my-single-item-component [entity]="???"></my-single-item-component>    
    </div>
  `
})

export class MyComponent implements OnInit {

  public toplist$ = this.store.pipe(select(getToplist)); 

  public getEntityById$ = this.store.pipe(???)

  constructor(store: Store<State>) {}

  ngOnInit() { }
}

So I need to call some selector with an dynamic id from the template.

I found a solution with an Observable function, but then the template gets very ugly. I think this must be a common problem. Does anyone has a neat solution for this?

Thank you!

unfortunately I don't understand your problem, add more information. What comes from the server? what the UI needs with some sample data — Aravind, May 14 '20 at 21:50
Sorry. I upodated the question and gave more information. Hope that is now enough. — trialgod, May 14 '20 at 22:10

score 5 · Accepted Answer · answered May 15 '20 at 06:13

Another way to tackle the issue is to create a selector for it.

const selectList = createSelector(
  selectTopList,
  selectEntities,
  (toplist, entities) => {
   return toplist.map(top => {
     return {
        top,
        entities: entities.filter(e => e.topId === top.id)
     }
   }
  }
)

And then you could just iterate over this selector in your view.

NgRx-Entity-Selector in loop

1 Answers1