Rxjs-合并2个Observables并发出合并的结果不起作用

时间:2019-09-01 20:02:11

标签: javascript rxjs observable

首先,这是我对rxjs的导入语句:

import { Subject, Observable, merge, combineLatest } from "rxjs";
import { map } from 'rxjs/operators';

这是package.json中我的rxjs版本: "rxjs": "^6.5.2"

我有一个Observable(this.searchResults$),它发出搜索API请求的结果。我现在要进行另一次搜索,并将新的搜索结果与旧的搜索结果合并,然后将它们全部放入this.searchResults$中。 this.handleSearch()返回带有搜索结果的可观察对象

我想我会这样做:

const newSearchResults$ = this.handleSearch(undefined, this.currentPage + x);
merge(newSearchResults$, this.searchResults$).subscribe(x => console.log(x));

但是此控制台记录:

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
(6) [{…}, {…}, {…}, {…}, {…}, {…}]

控制台日志的第二行需要包含16个项目。相反,它会被新的6个项目覆盖。

我在网上查看了为什么merge不合并结果的结果,发现我应该使用combineLatest

const newSearchResults$ = this.handleSearch(undefined, this.currentPage + x);
newSearchResults$.subscribe(x => x);
const combinedSearchResults$ = combineLatest(newSearchResults$, this.searchResults$)
    .pipe(map(([s1, s2]: Array < any > ) => [...s1, ...s2]));
combinedSearchResults$.subscribe(x => console.log(x));

这根本不会console.log任何东西,也没有错误。我在做什么错了?

按照帕维尔的回答,我尝试过:

const newSearchResults$ = this.handleSearch(undefined, this.currentPage + x);
this.searchResults$.pipe(
    mergeMap((d1: any) => newSearchResults$.pipe(map(d2 => [...d1, ...d2])))
).subscribe(console.log);

我也无法在console.log上获得任何东西。

1 个答案:

答案 0 :(得分:1)

如果您不想合并2个可观察对象,则可以使用mergemap运算符。 尝试这样的事情:

var obs1 = lastData;
var obs2 = newData;

obs1.pipe(
    mergeMap(d1 => obs2.pipe(map(d2 => [...d1, ...d2])))
).subscribe(console.log);

其次要注意,如果您使用冷观测或热观测,因为如果您使用冷观测,则不会保存该值,并且每次订阅该API时都会调用该API。 (您可以使用shareReplay运算符从冷创建可观察到的热。

或者您可以像以下示例一样使用BehaviorSubject: https://stackblitz.com/edit/angular-dkh5ji