“扁平化"的最佳方式RxJS Observable 中的数组 [英] Best way to "flatten" an array inside an RxJS Observable

问题描述

我的后端经常在 RxJS 5 Observable 中以 数组的形式返回数据(我使用的是 Angular 2).

My backend frequently returns data as an array inside an RxJS 5 Observable (I'm using Angular 2).

我经常发现自己想要使用 RxJS 运算符单独处理数组项，我使用以下代码 (JSBin):

I often find myself wanting to process the array items individually with RxJS operators and I do so with the following code (JSBin):

const dataFromBackend = Rx.Observable.of([
  { name: 'item1', active: true },
  { name: 'item2', active: false },
  { name: 'item3', active: true }
]);

dataFromBackend
  // At this point, the obs emits a SINGLE array of items
  .do(items => console.log(items))
  // I flatten the array so that the obs emits each item INDIVIDUALLY
  .mergeMap(val => val)
  // At this point, the obs emits each item individually
  .do(item => console.log(item))
  // I can keep transforming each item using RxJS operators.
  // Most likely, I will project the item into another obs with mergeMap()
  .map(item => item.name)
  // When I'm done transforming the items, I gather them in a single array again
  .toArray()
  .subscribe();

mergeMap(val => val) 行感觉不太习惯.

是否有更好的方法将转换应用于 Observable 发出的数组成员?

Is there a better way to apply transformations to the members of an array that's emitted by an Observable?

注意.我想要 RxJS 运算符(与数组方法)来转换我的项目，因为我需要能够将每个项目投影到第二个可观察对象中.典型用例:后端返回项目 ID 列表，我需要从后端请求所有这些项目.

NB. I want RxJS operators (vs array methods) to transform my items because I need the ability to project each item into a second observable. Typical use case: backend returns of list of item ids and I need to request all of these items from the backend.

推荐答案

您可以不带任何参数使用concatAll() 或 mergeAll().

You can use concatAll() or mergeAll() without any parameter.

dataFromBackend.pipe(
  tap(items => console.log(items)),
  mergeAll(), // or concatAll()
)

这(包括 mergeMap)仅在 RxJS 5 中有效，因为它以相同的方式处理 Observable、数组、类数组对象、Promise 等.

This (including mergeMap) works only in RxJS 5 because it treats Observables, arrays, array-like objects, Promises, etc. the same way.

最终你也可以这样做:

mergeMap(val => from(val).pipe(
  tap(item => console.log(item)),
  map(item => item.name),
)),
toArray(),

2019 年 1 月:针对 RxJS 6 更新

Jan 2019: Updated for RxJS 6

这篇关于“扁平化"的最佳方式RxJS Observable 中的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！