如何仅用RxJS操作符将含Observable属性的对象数组转为目标Observable类型

可以仅使用RxJS原生操作符实现该转换，具体实现方案如下：

核心逻辑 #

• 遍历原始数组的每一项，对每一项内的data Observable使用map操作符，将发射的字符串值与当前项的id组装为目标类型对象
• 无需引入除RxJS外的额外依赖

转换为Observable数组的实现 #

你的需求是输出数组，数组的每个元素是Observable<{id: number, data: string}>，实现代码如下：

import { map, Observable } from 'rxjs';

// 原始输入数组示例
const sourceArray: Array<{id: number, data: Observable<string>}> = [
  { id: 1, data: new Observable(sub => sub.next('第一份数据')) },
  { id: 2, data: new Observable(sub => sub.next('第二份数据')) }
];

// 转换逻辑
const targetArray: Array<Observable<{id: number, data: string}>> = sourceArray.map(item => {
  // 对每个项的data做映射，拼接id
  return item.data.pipe(
    map(dataStr => ({
      id: item.id,
      data: dataStr
    }))
  )
});

扩展场景：转换为单个Observable（发射完整解析后数组） #

如果你的实际需求是得到一个Observable，等所有内部data都完成发射后输出完整的{id: number, data: string}数组，可以配合forkJoin操作符实现：

import { forkJoin, map, Observable } from 'rxjs';

const mergedObservable: Observable<Array<{id: number, data: string}>> = forkJoin(
  sourceArray.map(item => 
    item.data.pipe(map(dataStr => ({ id: item.id, data: dataStr })))
  )
);

// 订阅即可拿到完整解析后的数组
mergedObservable.subscribe(parsedArray => {
  console.log(parsedArray);
});

注意事项 #

• 如果内部data是多值发射的Observable，上述第一种方案返回的每个Observable会跟随data的发射实时输出最新的组装对象
• 使用forkJoin时需要所有内部data都触发complete事件才会输出结果，如果你需要实时响应任意data的最新值，可以把forkJoin替换为combineLatest操作符

内容的提问来源于stack exchange，提问作者Eneko