我正在尝试在rxjs6
中使用mergeMap
,但收到此错误:
Property 'mergeMap' does not exist on type 'Observable<{}>'
我已经尝试了import 'rxjs/add/operator/mergeMap';
但它不起作用。
我做错了什么?
import {from, Observable} from 'rxjs';
export class Test {
public doSomething(): Observable<any> {
return from(...).mergeMap();
}
}
没错,自RxJS 6以来,运算符的"补丁"样式已被删除。您最好更新代码以仅使用"管道"运算符rxjs-compat
或者安装提供与 RxJS 5 向后兼容的包。
有关更详细的说明,请参阅官方文档:https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md
。更具体地说,这部分:https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#backwards-compatibility
多亏了@martin给出的答案,我才能让它与rxjs6
中的新pipe
操作一起工作。这是我的工作代码。
import {from, Observable} from 'rxjs';
import {mergeMap} from 'rxjs/operators';
export class Test {
public doSomething(): Observable<any> {
return from(...).pipe(mergeMap(...));
}
}
导入各个运算符,然后使用管道而不是链接。
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
source.pipe(
map(x => x + x),
mergeMap(n => of(n + 1, n + 2).pipe(
filter(x => x % 1 == 0),
scan((acc, x) => acc + x, 0),
)),
catchError(err => of('error found')),
).subscribe(printResult);
来源:https://auth0.com/blog/whats-new-in-rxjs-6/
组件 html 是这样的
<input type="text" placeholder="input first" id="input1">
<input type="text" id="input2" placeholder="input second">
<span></span>
导入所需函数
import { fromEvent } from 'rxjs'
import { map, mergeMap } from 'rxjs/operators'
var span = document.querySelector('span');
var input1 = document.querySelector('#input1');
var input2 = document.querySelector('#input2');
var obs1 = fromEvent(input1, 'input');
var obs2 = fromEvent(input2, 'input');
var obs1 = fromEvent(input1, 'input');
var obs2 = fromEvent(input2, 'input');
obs1.pipe(mergeMap(event1 => obs2.pipe(
map(event2 => (<HTMLInputElement>event1.target).value
+ " "
+ (<HTMLInputElement>event2.target).value))))
.subscribe((result) => {
span.textContent=result;
})