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

标签 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 任何东西,也没有错误。我做错了什么?

根据 Pavel 的回答,我尝试过:

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。

最佳答案

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

var obs1 = lastData;
var obs2 = newData;

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

其次,请注意您使用的是冷的还是热的 observable,因为如果您使用冷的,则不会保存该值,并且每次您订阅它时都会调用 API。 (您可以使用 shareReplay 运算符从冷创建热 observable。

或者您可以像本例中那样使用 BehaviorSubject: https://stackblitz.com/edit/angular-dkh5ji

关于javascript - Rxjs - 组合 2 个 Observables 并发出组合结果不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57749089/

相关文章:

angular - TypeError : You provided an invalid object where a stream was expected. 您可以提供一个 Observable、Promise、Array 或 Iterable

typescript - 在 Angular 2 中链接 RxJs Observables

java - Observable.notifyObservers 空指针异常

javascript - 如何隐藏 jstree 拆分器?

Javascript Date.getFullYear() 返回 1943 而不是 2013,为什么?

rxjs - 将前 3 个项目延迟 1 秒,第四个项目延迟 4 秒

android - 如何在生命周期独立类中处理 Observables?

2d - 我需要一个用于 JavaScript 的 2D 骨骼引擎

javascript - 从循环中启动一个函数,但只有一次

angular - 在使用可观察对象通过 NGRX 调用 API 之前检查 Angular Store 中的数据