可观察管道中的角度映射和订阅答案

【问题标题】：Angular Map and Subscribe in Observable pipe可观察管道中的角度映射和订阅
【发布时间】：2021-04-15 20:12:39
【问题描述】：

我需要你在 RxJS 方面的帮助。

我编写了这段代码，它是获取 API 所需的，对于返回的元素，从另一个 API 获取此元素类型。这段代码工作正常，但它返回一个 Observable 用于 'type' 属性，而不是仅返回“string”。你知道如何实现这一目标吗？非常感谢。

combineLatest([
  this.service.list().pipe(
   map(items =>
     items.map(item => {
       item['type'] = this.getType(item.id);
       return item;
     })
    ),
    map(items => items.map(item => ({
      id: item.id,
      type: item['type'],
    })))
 ),
 this.form.valueChanges,
]).subscribe()

【问题讨论】：

标签： angular rxjs

【解决方案1】：

您将Observable 分配给属性而不是它的响应。您需要将 RxJS forkJoin 和 Array#map 与 switchMap 这样的高阶映射运算符一起使用。

试试下面的

combineLatest([
  this.service.list().pipe(
    switchMap((items: any) =>             // <-- switch to another observable
      forkJoin(                           // <-- multiple parallel requests
        items.map(item => 
          this.getType(item['id']).pipe(
            map((type: any) => ({         // <-- map back to original item with added type
              ...item,
              type: type
            }))
          )
        )
      )
    )
  ),
  this.form.valueChanges,
]).subscribe()

【讨论】：

嗨@Michael，感谢您的回复，它看起来很好，我有一个问题，为什么您选择使用 fork-join 运算符，而我们没有并行 API 调用需求，因为我播种问题代码？
@RebaiAhmed：要求“为数组中的每个对象获取一个属性” 是并行请求的标准用例。本质上，独立属性是并行获取的。但如果它造成性能瓶颈（由于请求过多），您可以将 forkJoin 替换为 from + concatMap 以按顺序获取属性。您还可以看到 here 用于缓冲提取例程。
感谢您的回复，让我学到了很多