2

我有以下问题。假设我有一个对服务器的请求，它以特定顺序为我提供了一个 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 函数的解决方案，但是模板变得非常难看。我想这一定是一个普遍的问题。有没有人有一个巧妙的解决方案？

谢谢！

4

1 回答 1

5

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

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

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

于 2020-05-15T06:13:22.153 回答