Rxjs：将数组字段中的每个元素从对象的可观察对象映射到另一个可观察对象

Question

我有一个名为 getTransactionDetails(id:string) 的方法，它return是 TransactionDetails 对象的 Observable

getTransactionDetails(id:string):Observable<TransactionDetails>

TransactionDetails 对象如下所示：

class TranscationDetails{
    id:string;
    accessCode: string;
    veggiesList: Array<Veggie>;
    meatList: Array<Meat>;
}

Veggie 对象如下所示：

class Veggie{
    id: string;
    name: string;
}

我有另一个方法叫做 getVeggieSummary(veggieId: string)，它 return 是 VeggieSummary 的 Observable:

getVeggieSummary(veggiesId:string):Observable<VeggieSummary>

VeggieSummary 看起来像这样

class VeggieSummary{
    id:string;
    name:string;
    color:string;
    kind:string;
}

我想调用 getTransactionDetails(1)，并将 veggiesList 中的所有 Veggies 元素转换为 VeggieSummary 和 return VeggieSummary 数组。

这就是我的

getTransactionDetails(1)
.flatMap(transactionDetails=>
    transactionDetails.veggiesList
       .map(veggie=>getVeggieSummary(veggie.id)))
.subscribe(result=>
    console.log(result)
)

目前，result 是一个 Observable<VeggieSummary> 并且内部 observable 甚至没有被订阅...

如何使用 rxjs 运算符获得 Observable<VeggieSummary[]>？

注意：我的应用程序的 angular 版本不支持管道。 RxJS 版本是 v5

Answer 1

您能否尝试用 forkjoin 包装数组，看看是否能解决问题？我认为目前它正在返回 Observable<VeggieSummary>[]

getTransactionDetails(1)
.flatMap(transactionDetails=>
    forkJoin(transactionDetails.veggiesList
       .map(veggie=>getVeggieSummary(veggie.id))))
.subscribe(result=>
    console.log(result)
)

Answer 2

你只需要用 forkJoin 包装内部 observable，这会将 Observable<VeggieSummary>[] 转换为 Observable<VeggieSummary[]>

    getTransactionDetails(1)
      .flatMap((transactionDetails) =>
        forkJoin(
          transactionDetails.veggiesList.map((veggie) =>
            getVeggieSummary(veggie.id)
          )
        )
      )
      .subscribe((result) => console.log(result));

Answer 3

使用 forkjoin，这有效：

  getTransactionDetails(1)
  .flatMap((transactionDetails) =>
    forkJoin(
      transactionDetails.veggiesList.map((veggie) =>
        getVeggieSummary(veggie.id)
      )
    )
  )
  .subscribe((result) => console.log(result));

我发现带有展开运算符 (...) 的 zip 也有效：

   getTransactionDetails(1)
  .flatMap((transactionDetails) =>
    zip(
      ...transactionDetails.veggiesList.map((veggie) =>
        getVeggieSummary(veggie.id)
      )
    )
  )
  .subscribe((result) => console.log(result));

我从另一个 post 那里了解到的。

但我不确定使用哪一个，forkjoin 还是 zip？重要吗？

我还从 post.

中了解了 rest operator/spread 运算符 (...)

但是我还是不太明白它在这个例子中是如何工作的。

我不确定我使用的是哪一个，我是在使用剩余运算符还是扩展运算符？

它等价于什么？

Rxjs：将数组字段中的每个元素从对象的可观察对象映射到另一个可观察对象

Rxjs: map each element in an array field from an observable of object with another observable

javascript

angular

rxjs

observable

reactive-programming