如何将两个相似的 RxJS 可观察对象数组组合成一个对象数组？答案

【问题标题】：How to combine two similar RxJS observable object arrays into one array of objects?如何将两个相似的 RxJS 可观察对象数组组合成一个对象数组？
【发布时间】：2020-05-21 00:43:54
【问题描述】：

例如，我需要帮助来获取来自对象数组的两个 HTTP GET 响应并将它们组合到一个对象数组中

如果可能的话，我希望使用 rxjs 的 http 数组更有可能得到一个数组中包含所有 3 个对象的响应

如下图

[{...}, {...}, {...}]

.ts

incidents$ = this.incidentService.getAll();
otherIncidents$ = this.otherIncidentsService.getAll();


ngOnInit() {


this.incidents$.subscribe(res => {
 console.log('first http GET request', res)
})

this.otherIncidents$.subscribe(res => {
 console.log('second http GET request', res)
 })

控制台

second http GET request [{…}]
0: {incidentNumber: 19418, createdByName: "User", execSummaryFlag: 
false, followupEmail: null, …}
length: 1__proto__: Array(0)
exec-summary.component.ts:140 

first http GET request (2) [{…}, {…}]
0: {incidentNumber: 19380, createdByName: "User", execSummaryFlag: false, 
followupEmail:null, …}
1: {incidentNumber: 19399, createdByName: "User", execSummaryFlag: false, 
followupEmail: null, …}length: 2__proto__: Array(0)

【问题讨论】：

标签： angular rxjs

【解决方案1】：

您可以尝试使用 Rxjs forkJoin 组合多个可观察对象并将响应映射到您的要求（使用 spread 运算符）。试试下面的

import { forkJoin, pipe } from 'rxjs';
import { map } from 'rxjs/operators';

forkJoin({
  incident: incidents$,
  otherIncident: otherIncidents$,
})
.pipe(
  map(response => ([...response.incident, ...response.otherIncident]))
)
.subscribe(
  response => { // handle reponse },
  error => { // handle error }
);

当所有 observables 完成时，RxJS forkJoin 会发出最后一个发出的值。

【讨论】：

【解决方案2】：

看看Concat

// RxJS v6+
import { of, concat } from 'rxjs';

concat(
  of(1, 2, 3),
  // subscribed after first completes
  of(4, 5, 6),
  // subscribed after second completes
  of(7, 8, 9)
)
  // log: 1, 2, 3, 4, 5, 6, 7, 8, 9
  .subscribe(console.log);

【讨论】：

【解决方案3】：

你有几个选择：

zip函数： “在所有可观察对象发出后，将值作为数组发出”

zip(this.incidents$, this.otherIncidents$).subscribe(...);

withLatestFrom 运营商： "同时提供另一个 observable 的最后一个值"

this.incidents$
   .pipe(
      withLatestFrom(this.otherIncident$),
   )
   .subscribe(...);

combineLatest 函数（非常类似于zip） “当任何 observable 发出一个值时，从每个发出最后一个发出的值”

combineLatest(this.incidents$, this.otherIncidents$).subscribe(...);

他们三个发出一个包含两个 observable 的数组。

【讨论】：

【解决方案4】：

你可以

使用forkjoin 等待两个可观察对象返回
然后使用switchMap改变结果
在 switchMap 中，您可以操作数组。在这种情况下，我们使用Array.concat() 生成一个新数组，该数组结合了两个 observable 的输出

forJoin({ incident: this.incidents$, otherIncident: this.otherIncidents$ }) .pipe( switchMap ( response => response.incident.concat(response.otherIncident)) ).subscribe( response => {//do something}, error => {//handle error} );

【讨论】：

【解决方案5】：

回答我的问题

ngOnInit(){

const incidents = this.incident.getAll();
const otherIncidents = this.otherService.getAll();
forkJoin([incidents, otherIncidents])
.subscribe(res => {
 this.execEntry=[...res[0], ...res[1]];
 console.log(this.execEntry);
})
}

【讨论】：