Angular RxJS：如何将新增项推入现有Observable数组？

你的代码出现类型错误的核心原因是**concatMap的使用方式导致Observable发射的类型不符合预期**，同时逻辑上也没有正确累积新添加的房间。

错误细节 #

你在concatMap((room) => [...rooms, room])中返回了一个新数组，但concatMap会将数组视为可迭代对象，逐个发射数组中的每个元素——也就是说，原本应该发射Room[]的Observable，变成了发射单个Room对象的Observable，这就和你声明的rooms$: Observable<Room[]>类型不匹配，触发了TypeScript的类型检查错误。

另外，这段逻辑还有个隐藏问题：每次收到新房间时，你都是基于最初获取的rooms数组创建新数组，没有保留之前添加的新房间，无法实现“持续添加新房间到列表”的需求。

修正后的代码 #

export class RoomListComponent {
  rooms$: Observable<Room[]> = this.roomService.getRooms().pipe(
    mergeMap((initialRooms) => 
      this.notificationService.getServerSentEvent<Room>().pipe(
        // 用scan累积房间列表，每次收到新房间就追加到现有列表中
        scan((currentRooms, newRoom) => [...currentRooms, newRoom], initialRooms),
        // 确保组件初始化时先发射初始房间列表，无需等待第一个SSE事件
        startWith(initialRooms)
      )
    )
  );

  constructor(
    private notificationService: NotificationService,
    private roomService: RoomService
  ) {}
}

关键改进点 #

1. 使用scan操作符维护状态：scan会持续累积数据流的状态，这里用它保存当前的房间列表，每次收到新房间就返回包含新房间的新数组（保持不可变性）。
2. 添加startWith发射初始列表：确保组件一开始就能获取到现有房间，不用等待第一个SSE事件触发。
3. 类型匹配：修正后Observable始终发射Room[]类型，符合变量声明的类型要求。

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