Die Eigenschaft 'map' ist für den Typ 'Observable <Response>' nicht vorhanden.

Ich versuche, eine API von Angular aus aufzurufen, erhalte jedoch den folgenden Fehler:

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

Die Antworten auf diese ähnliche Frage haben mein Problem nicht gelöst: Angular 2 beta.17: Die Eigenschaft 'map' ist für den Typ 'Observable <Response>' nicht vorhanden .

Ich verwende Angular 2.0.0-beta.17.

Sie müssen den mapOperator importieren :

import 'rxjs/add/operator/map'

Oder allgemeiner:

import 'rxjs/Rx';

Hinweis: Für Versionen von RxJS 6.x.xund höher müssen Sie pipeable Operatoren verwenden, wie im folgenden Code-Snippet gezeigt:

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

Dies wird dadurch verursacht, dass das RxJS-Team die Unterstützung für die Verwendung entfernt. Weitere Informationen finden Sie in den wichtigsten Änderungen im Änderungsprotokoll von RxJS.

Aus dem Changelog:

Operatoren : Pipeable-Operatoren müssen jetzt wie folgt aus rxjs importiert werden : import { map, filter, switchMap } from 'rxjs/operators';. Keine tiefen Importe.

Wiederholen Sie diesen Vorgang, da meine Lösung hier nicht aufgeführt ist.

Ich verwende Angular 6 mit rxjs 6.0 und bin auf diesen Fehler gestoßen.

Folgendes habe ich getan, um das Problem zu beheben:

ich habe mich verändert

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

einfach sein:

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

Ich habe das Update hier gefunden:

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

Schreiben Sie diesen Befehl einfach in das vs code-Terminal Ihres Projekts und starten Sie das Projekt neu.

npm install rxjs-compat

Sie müssen den mapOperator importieren , indem Sie Folgendes schreiben:

import 'rxjs/add/operator/map';

Für den Angular 7v

Veränderung

import 'rxjs/add/operator/map';

Zu

import { map } from "rxjs/operators"; 

Und

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

Ich hatte das gleiche Problem mit Angular 2.0.1, weil ich Observable aus importierte

import { Observable } from 'rxjs/Observable';

Ich behebe mein Problem beim Importieren von Observable von diesem Pfad

import { Observable } from 'rxjs';

In rxjs 6 wurde die Verwendung des Kartenoperators geändert. Jetzt müssen Sie sie wie folgt verwenden.

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

Als Referenz https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

Installieren Sie einfach rxjs-compatible, indem Sie terminal eingeben:

npm install --save rxjs-compat

dann importieren:

import 'rxjs/Rx';

Im neuesten Angular 7. *. * Können Sie dies einfach wie folgt versuchen:

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

Und dann können Sie diese methodswie folgt verwenden:

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

Überprüfen Sie diese Demo für weitere Details.

In meinem Fall würde es nicht ausreichen, nur Karte und Versprechen aufzunehmen:

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

Ich habe dieses Problem gelöst, indem ich mehrere rxjs-Komponenten als offizielle Dokumentation importiert habe empfohlen:

1) Importieren Sie Anweisungen in eine Datei app / rxjs-operator.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) Importieren Sie den rxjs-Operator selbst in Ihren Dienst:

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

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

In der obigen Funktion können Sie sehen, dass ich res.json () nicht verwendet habe, da ich HttpClient verwende. Es wendet res.json () automatisch an und gibt Observable (HttpResponse <string>) zurück. Sie müssen diese Funktion nach Winkel 4 in HttpClient nicht mehr selbst aufrufen.

Ich hatte das gleiche Problem, ich verwendete Visual Studio 2015, das eine ältere Version von Typoskript hatte.

Nach dem Upgrade der Erweiterung wurde das Problem behoben.

Download-Link

Ich verwende Angular 5.2 und wenn ich import 'rxjs/Rx';es verwende, wird der folgende Flusenfehler ausgegeben: TSLint: Dieser Import ist auf der schwarzen Liste. Importieren Sie stattdessen ein Submodul (Import-Blacklist).

Siehe den Screenshot unten:

LÖSUNG: Es wurde behoben, indem nur die Operatoren importiert wurden, die ich brauchte . Beispiel folgt:

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

Die Lösung wäre also, nur die erforderlichen Operatoren zu importieren.

Installieren Sie einfach rxjs-compatible , um das Problem zu lösen

npm i rxjs-compat --save-dev

Und importiere es wie unten

import 'rxjs/Rx';

Führen Sie zunächst die Installation wie folgt aus:

npm install --save rxjs-compat@6

Jetzt müssen Sie importieren rxjsin service.ts:

import 'rxjs/Rx'; 

Voila! Das Problem wurde behoben.

Einfach ausführen npm install --save rxjs-compat, behebt den Fehler.

Es wird hier empfohlen

Ich habe alle möglichen Antworten ausprobiert, von denen keine funktioniert hat.

Ich habe das Problem gelöst, indem ich einfach meine IDE, dh Visual Studio Code, neu gestartet habe

Möge es jemandem helfen.

Auch ich hatte den gleichen Fehler. Eine Lösung, die für mich funktioniert hat, war das Hinzufügen der folgenden Zeilen in Ihrer service.ts- Datei anstelle von import 'rxjs/add/operator/map':

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

Zum Beispiel war meine app.service.ts nach dem Debuggen wie folgt :

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

Wenn nach dem Importieren des Imports 'rxjs / add / operator / map' oder des Imports 'rxjs / Rx' ebenfalls der gleiche Fehler auftritt, starten Sie den Visual Studio-Code-Editor neu. Der Fehler wird behoben.

Überprüfen Sie für alle Linux-Benutzer, bei denen dieses Problem auftritt, ob der Ordner rxjs-compatible gesperrt ist. Ich hatte genau das gleiche Problem und ging ins Terminal, benutzte das sudo su, um dem gesamten rxjs-kompatiblen Ordner die Erlaubnis zu geben, und es wurde behoben. Vorausgesetzt, Sie haben importiert

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

in der Datei project.ts, in der der ursprüngliche .map-Fehler aufgetreten ist.

Verwenden Sie die mapFunktion in pipeFunktion und es wird Ihr Problem lösen. Sie können die Dokumentation hier überprüfen .

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

npm installiere rxjs @ 6 rxjs-compatible @ 6 --save

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

 }

Führen Sie den Befehl aus

 npm install rxjs-compat 

Ich importiere nur

 import 'rxjs/add/operator/map';

Starten Sie den vs-Code neu, Problem behoben.

Die eckige neue Version unterstützt keine .map, die Sie über cmd npm install installieren müssen - speichern Sie rxjs-kompatibel über diese, die Sie mit alter Technik genießen können. Hinweis: Vergessen Sie nicht, diese Zeilen zu importieren.

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';