web-dev-qa-db-ja.com

プロパティ 'catch'はタイプ 'Observable <any>'に存在しません

Httpサービスを使用するためのAngular 2ドキュメントページに、例があります。

getHeroes (): Observable<Stuff[]> {
  return this.http.get(this.url)
                  .map(this.extractData)
                  .catch(this.handleError);
}

私は angular2-webpack-starter プロジェクトを複製し、上記のコードを自分で追加しました。

を使ってObservableをインポートしました

import {Observable} from 'rxjs/Observable';

私はプロパティObservableもインポートされていると仮定します（.mapは動作します）。 rxjs.beta-6の変更履歴を確認しましたが、catchについては何も言及されていません。

javascriptangulartypescriptrxjs
109
BrianRT

はい、あなたはオペレータをインポートする必要があります：

import 'rxjs/add/operator/catch';

またはObservableを次のようにインポートします。

import {Observable} from 'rxjs/Rx';

しかし、この場合は、すべての演算子をインポートします。

詳細についてはこの質問を参照してください。

230
Thierry Templier

RxJS 5.5以降では、catch演算子は廃止予定です。 catchError演算子をpipeと組み合わせて使用​​してください。

RxJS v5.5.2がAngular 5のデフォルトの依存関係バージョンです。

catchErrorを含む、インポートしたRxJS演算子ごとに、 'rxjs/operator'からインポートしてパイプ演算子を使用する必要があります。

HTTPリクエストオブザーバブルのキャッチエラーの例

import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
...

export class ExampleClass {
  constructor(private http: HttpClient) {
    this.http.request(method, url, options).pipe(
      catchError((err: HttpErrorResponse) => {
        ...
      }
    )
  }
  ...
}

ここで、catchはcatchErrorに置き換えられ、pipe演算子はドットチェインで使用されているのと同じ方法で演算子を構成するために使用されます。

詳細については、 pipable （以前は lettable として知られていた）演算子に関するrxjsのドキュメントを参照してください。

69
Trent