NgRx-实体-循环中的选择器

Question

我有以下问题。假设我有一个对服务器的请求，它提供了一个按特定顺序排列的I列表。其他调用正在加载实体，我让它们处于单独的状态：

所以简化后的我的状态类似于：

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

该组件的简化版本如下所示。

@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() { }
}

所以我需要从模板中调用一些带有动态id的选择器。

我找到了一个具有可观察函数的解决方案，但随后模板变得非常丑陋。我想这一定是一个常见的问题。有没有人对此有一个简洁的解决方案？

谢谢!

Answer 1

解决这个问题的另一种方法是为它创建一个选择器。

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

然后你可以在你的视图中遍历这个选择器。