web-dev-qa-db-ja.com

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

AngularからAPIを呼び出そうとしていますが、このエラーが発生しています。

Property 'map' does not exist on type 'Observable<Response>'

Angular 2 beta.17：プロパティ 'map'はタイプ 'Observable <Response>'には存在しません .

Angular 2.0.0-beta.17を使用しています。

angularvisual-studio-2015asp.net-core-mvctypescript1.8
122
Malik Kashmiri

map演算子をインポートする必要があります。

import 'rxjs/add/operator/map'

もっと一般的には：

import 'rxjs/Rx';

Notice：RxJS 6.x.x以上のバージョンでは、以下のコードスニペットに示すように、パイプ可能な演算子を使用する必要があります。

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

// ...
export class MyComponent {
  constructor(private http: HttpClient) { }
  getItems() {
    this.http.get('https://example.com/api/items').pipe(map(data => {})).subscribe(result => {
      console.log(result);
    });
  }
}

これは、RxJSチームが使用するためのサポートを削除したことが原因です。詳細については、RxJSのチェンジログの 最新の変更 を参照してください。

変更履歴から：

演算子 ：パイプ可能な演算子はrxjsからインポートする必要があります。import { map, filter, switchMap } from 'rxjs/operators';。深い輸入はありません。

243
Thierry Templier

私の解決策がここにリストされていないのでこれを再考してください。

Rxjs 6.0でAngular 6を実行していて、このエラーが発生しました。

これを修正するために私がしたことは次のとおりです。

私が変更され

map((response: any) => response.json())

単純に

.pipe(map((response: any) => response.json()));

私はここで修正を見つけました：

https://github.com/angular/angular/issues/15548#issuecomment-387009186

それが役立つことを願っています。

105
Nick Hodges

プロジェクトのvs code端末にこのコマンドを書いて、プロジェクトを再起動してください。

npm install rxjs-compat

次のように書いてmap演算子をインポートする必要があります。

import 'rxjs/add/operator/map';
38
Karan Raiyani

Observableからインポートしていたので、Angular 2.0.1でも同じ問題がありました。

import { Observable } from 'rxjs/Observable';

代わりにこのパスからObservableをインポートする際の問題を解決しました

import { Observable } from 'rxjs';
25
S.Galarneau

Rxjs 6では、マップ演算子の使用法が変更されたので、このように使用する必要があります。

import { map } from 'rxjs/operators';
myObservable
  .pipe(map(data => data * 2))
  .subscribe(...);

参考のために https://www.academind.com/learn/javascript/rxjs-6-what-c​​hanged/#operators-update-path

13
Hari Prasad Sharma

Angular 7v用

変化する

import 'rxjs/add/operator/map';

に

import { map } from "rxjs/operators";

そして

 return this.http.get('http://localhost/ionicapis/public/api/products')
 .pipe(map(res => res.json()));
9
Nadeem Qasmi

私の場合は、mapとpromiseだけを含めるだけでは不十分です。

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

私はこの問題を解決するために、いくつかのrxjsコンポーネントを 公式ドキュメント recommendとしてインポートしました。

1）app/rxjs-Operators.tsファイルにステートメントをインポートします。

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

2）あなたのサービスにrxjs-operator自体をインポートします。

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
5
Alex Valchuk

ターミナルに入力してrxjs-compatをインストールするだけです。

npm install --save rxjs-compat

次にインポートします。

import 'rxjs/Rx';
5
Amir.S

最新の Angular 7。*。* では、これを単純に試すことができます。

import { Observable, of } from "rxjs";
import { map, catchError } from "rxjs/operators";

そして、これらのmethodsを次のように使うことができます。

   private getHtml(): Observable<any> {
    return this.http.get("../../assets/test-data/preview.html").pipe(
      map((res: any) => res.json()),
      catchError(<T>(error: any, result?: T) => {
        console.log(error);
        return of(result as T);
      })
    );
  }

詳しくは demo をチェックしてください。

4
Hearen

Angular 5.2を使用していますが、import 'rxjs/Rx';を使用すると、次のlintエラーがスローされます：TSLint：このインポートはブラックリストに登録されています、代わりにサブモジュールをインポートします（import-blacklist）

以下のスクリーンショットを参照してください。 Import of rxjs/Rx is blacklisted in Angular 5.2

解決策：必要な演算子のみをインポートすることで解決しました。例は次のとおりです。

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

したがって、修正は、必要な演算子のみを具体的にインポートすることです。

3
Devner

私は同じ問題を抱えていた、私はTypeScriptの古いバージョンを持っていたVisual Studio 2015を使用していた。

拡張機能をアップグレードした後、問題は解決しました。

ダウンロードリンク

3
Naveen

まず最初に以下のようにインストールを実行します。

npm install --save rxjs-compat@6

今度はrxjsをservice.tsにインポートする必要があります。

import 'rxjs/Rx';

ほら！問題は修正されました。

2
Brahmmeswara Rao Palepu

インポート 'rxjs/add/operator/map'またはインポート 'rxjs/Rx'のインポート後も同じエラーが発生する場合は、Visual Studioのコードエディタを再起動してください。エラーは解決されます。

2
Chirag

問題を解決するには、 rxjs-compat をインストールするだけです。

npm i rxjs-compat --save-dev

以下のようにインポートしてください

import 'rxjs/Rx';
2
Ankit Bhatia

私も同じエラーに直面しました。私のために働いた一つの解決策はあなたの service.ts file 代わりに にimport 'rxjs/add/operator/map'の行を追加することでした：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

例えば、デバッグ後のmy app.service.ts は、

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class AppService {
    constructor(private http: HttpClient) {}
    getData(): Observable<any> {
        return this.http.get('https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22')
        .pipe(map(result => result));
    }
}
2
Steffi Keran Rani J

私は上で投稿されたすべての可能な答えを試しましたそれらのどれもうまくいきませんでした、

IDE、つまりVisual Studioコードを再起動するだけで解決しました。

誰かに役立つかもしれません。

2
Shylendra Madda
import { map } from "rxjs/operators";

getGetFunction(){
this.http.get('http://someapi')
.pipe(map(res => res));
}

getPostFunction(yourPara){
this.http.get('http://someapi',yourPara)
.pipe(map(res => res));
}

上記の関数では、HttpClientを使用しているため、res.json（）を使用しなかったことがわかります。 res.json（）を自動的に適用し、Observable（HttpResponse <string>）を返します。 HttpClientでangular 4の後にこの関数を自分で呼び出す必要はなくなりました。

1
Dushan

map関数でpipe関数を使用すると、問題が解決します。あなたはドキュメンテーションをチェックすることができます ここ 。

this.items = this.afs.collection('blalal').snapshotChanges().pipe(map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Items;
    data.id = a.payload.doc.id;
    return data;
  })
})
1
Mohammad Quanit

npm install rxjs @ 6 rxjs-compat @ 6 --save

1
Ajay Takur

この問題を抱えているすべてのLinuxユーザーのために、rxjs-compatフォルダーがロックされているか確認してください。私はこれと全く同じ問題を抱えていました、そして私はターミナルに行きました、全体のrxjs-compatフォルダーに許可を与えるためにSudo suを使って、そしてそれは修正されました。あなたが輸入したと仮定します

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

元の.mapエラーが発生したproject.tsファイル内。

1
JavaJunior
  import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';

  @Injectable({
  providedIn: 'root'
  })
  export class RestfulService {

  constructor(public http: Http) { }

 //access apis Get Request 
 getUsers() {
 return this.http.get('http://jsonplaceholder.typicode.com/users')
  .map(res => res.json());
  }

 }

コマンドを実行する

 npm install rxjs-compat

輸入したばかり

 import 'rxjs/add/operator/map';

vsコードを再起動し、問題を解決した。

0
Nadeem Qasmi