web-dev-qa-db-ja.com

監視可能なタイプにmergeMapが存在しません

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();
    }

}
typescriptrxjsreactivexrxjs6
5
prolink007

そのとおりです。RxJS6以降、「パッチ」スタイルの演算子は削除されています。「パイプ可能」演算子のみを使用するようにコードを更新するか、RxJS 5との下位互換性を提供するrxjs-compatパッケージをインストールする必要があります。

詳細については、公式ドキュメントを参照してください： 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

14
martin

@martinの回答のおかげで、rxjs6の新しいpipeオペレーションで動作するようになりました。これが私の作業コードです。

import {from, Observable} from 'rxjs';
import {mergeMap} from 'rxjs/operators';

export class Test {

    public doSomething(): Observable<any> {
        return from(...).pipe(mergeMap(...));
    }

}
10
prolink007

個々のオペレーターをインポートしてから、チェーンの代わりにパイプを使用します。

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/

3
farrellw

Component Html Goes like this

<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;
      })
0
Shashikant Pandit