Question

我正在使用角度6的NGRX。在我的组件中，我调用了选择器，该选择器返回对象列表。例如，

 list$: Observable<any>;
this.list$ = this.store$.select(getPreviousById(Id));

当前，我使用| async将返回的列表绑定到html上，并且效果很好。我有一个新的要求，其中列表中的某些项目是键，我需要进行另一个API调用才能获取每个键的完整详细信息。我不确定如何执行此操作，仍然仍然干净地保留HTML上的绑定。

我是否必须处理返回的初始可观察对象，然后提取此键，将操作分派到商店并将结果合并回初始列表？

调用一个可观察对象中的几个可观察对象并仅在所有子可观察对象都返回时将其标记为完成的方式是什么？

Answer 1

您可以使用flatMap运算符执行此操作。使用此运算符，您可以将每个项目映射到一个Observable，然后将它们重新合并在一起，因此最后您可以拥有一个包含所有项目的Observable。这是一个简单的示例：

const items: Observable<Item | number> = of(new Item(1, 'Name1'), 3, 4, new Item(1, 'Name2'));

const outputItems: Observable<Item> = items.pipe(
  mergeMap((x: Item | number) => {
    if (typeof x === 'number') { // it is a key call service
      return of(new Item(x, `Name${x}`)); // here you call the service to get the item 
    } else {
      return of(x); //return observable directly from item
    }
  })
);

如果要保留项目顺序，请使用concatMap运算符。

Angular / NGRX中可观察的内部有多个可观察物，并在最后合并结果

1 个答案: