循环中的 NgRx-Entity-Selector

Question

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

这么简化我的状态是这样的：

{
  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 调用一些选择器。

我找到了一个带有 Observable 函数的解决方案，但是模板变得非常难看。我想这一定是一个普遍的问题。有没有人对此有一个巧妙的解决方案？

谢谢！

Answer 1

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

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

然后您可以在您的视图中迭代此选择器。

循环中的 NgRx-Entity-Selector

NgRx-Entity-Selector in loop

ngrx

angular

ngrx-store

ngrx-entity