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!

Answer 1

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.