如何使用 RxJs 將兩個 Observable 組合成一個 Observable 數組

Question

我試圖將兩個 Observables 組合成一個 Observables 數組，我的 Angular 應用程序可以隨着時間的推移訂閱和接收值。 該場景使用聊天機器人。 用戶提供輸入，機器人做出響應，兩者結合在一個數組中用於聊天流。

請參閱以下內容：

用於獲取用戶輸入的聊天輸入組件：

  onNewComment(value: string): void {
    this.chatService.addComment(value);
  }

然后與chat.service.ts

import { Injectable, Output } from '@angular/core';
import { Observable, BehaviorSubject, Subject, combineLatest, from, merge, concat } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UserInput } from '../interfaces/user-input';
import { map, tap, switchMap, mergeMap, toArray, scan, shareReplay, take } from 'rxjs/operators';
import { of } from 'rxjs';
import { text } from '@angular/core/src/render3';
import { Division } from '../interfaces/division';


const headers = new HttpHeaders();
headers.append(
    'Content-Type', 'application/json'
);

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  apiUrl = environment.apiUrl;
  conversationSubject: BehaviorSubject<any[]> = new BehaviorSubject<any>([]);
  conversationArray$: Observable<any> =  this.conversationSubject.asObservable();
  private commentAddedSubject = new Subject<any>();
  commentAddedAction$ = this.commentAddedSubject.asObservable();


  sessionToken$ = this.http.get<any>(`${this.apiUrl}/api/session`).pipe(
    map(data => data.session_id),
    tap(data => this.addComment('')),
    shareReplay(1)
  );

  commentWithSessionToken$ = combineLatest([
    this.sessionToken$,
    this.commentAddedAction$
  ]).pipe(
    map(([sessionToken, comment]) => {
      return {
        session_id: sessionToken,
        input: {
          text: comment
        },
        };
      }
    ),
  );


  botResponse$ = this.commentWithSessionToken$
    .pipe(
      switchMap(comment =>
        of(comment)
          .pipe(
            mergeMap(data => this.http.post<any>(`${this.apiUrl}/api/message`,
              {
                userInput: data
              },
              {
                headers: headers
              })
              ),
            )
          )
      );

  addComment(newComment?: string) {
    this.commentAddedSubject.next(newComment);
  }

  constructor(
    private http: HttpClient,
  ) { }
}

我嘗試了多種方法將commentWithSessionToken$和botResponse$成一組用戶輸入和機器人響應，但沒有任何運氣。 我需要的最終結果是這樣的：

[commentWithSessionToken$, botResponse$, commentWithSessionToken$, etc, etc]

任何建議將不勝感激。 謝謝你。

Answer 1

請使用 rxjs forkJoin

forkJoin(commentWithSessionToken$, botResponse$, commentWithSessionToken$, etc, etc)

返回類型是observable<[commentWithSessionToken$, botResponse$,...]>

Answer 2

我認為你應該合並你的觀察對象並掃描它們

chat$ = merge(this.commentWithSessionToken$, this.botResponse$).pipe(
  scan((acc, curr) => ([...acc, curr]), []),
);