RxJS：如何将同类型Observable合并为单个Observable

我来帮你拆解下两种实现的问题，再给出能正常工作的解决方案：

为什么你的两种实现都不生效？ #

第一种实现的问题 #

你在flatMap（RxJS现在更推荐用mergeMap）里给每个getEvent(event)加了toArray()，这里的逻辑走偏了：

• this.getEvent(event)返回的是Observable<Event>，也就是单个事件的流
• 调用toArray()会把这个单事件包装成Observable<Event[]>（即发射[event]）
• 但mergeMap会把这个数组“扁平化”，最终你的Observable会逐个发射单个Event对象，而不是一次性发射所有Event组成的数组
• 虽然你标注返回类型是Observable<Event[]>，但实际运行时是Observable<Event>，模板里用*ngFor遍历单个Event自然显示为空

第二种实现的问题 #

去掉toArray()后，你的Observable会逐个发射每个Event对象，而*ngFor需要的是数组类型（或者Observable<Array>配合async管道）。直接绑定的话，async管道会把每个单独的Event传给*ngFor，无法遍历，所以也无法正常显示。

正确的实现方式 #

你需要先收集所有获取事件的Observable，然后用forkJoin（适合一次性请求的场景）等待所有请求完成，最终返回一个包含所有Event的数组：

getEventsForAdmin(): Observable<Event[]> {
  return this.userProvider.getCurrentUser().pipe(
    switchMap(user => {
      // 将每个事件ID转换为对应的Observable<Event>
      const eventObservables = user.eventAdminList.map(eventId => this.getEvent(eventId));
      // 使用forkJoin等待所有请求完成，返回结果数组
      return forkJoin(eventObservables);
    })
  );
}

关键说明： #

• forkJoin会等待传入的所有Observable都完成，然后把它们的结果按顺序收集成一个数组发射，正好匹配你需要的Observable<Event[]>类型
• 如果你的getEvent方法是实时更新的（比如会多次发射新值），可以把forkJoin换成combineLatest，这样每当任何一个事件更新时，都会重新发射包含所有最新事件的数组

模板使用示例 #

在组件里直接用async管道订阅即可：

<div *ngFor="let event of getEventsForAdmin() | async">
  <!-- 渲染你的事件内容 -->
</div>

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