Eigenschap ‘kaart’ bestaat niet op type ‘Observable<Response>’

Ik probeer een API aan te roepen vanuit Angular, maar krijg deze foutmelding:

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

De antwoorden van deze vergelijkbare vraag hebben mijn probleem niet opgelost: Angular 2 beta.17: eigenschap ‘map’ bestaat niet op type ‘Observable<Response>’.

Ik gebruik Angular 2.0.0-beta.17.

Antwoord 1, autoriteit 100%

U moet de operator mapimporteren:

import 'rxjs/add/operator/map'

Of meer in het algemeen:

import 'rxjs/Rx';

Opmerking: voor versies van RxJS 6.x.xen hoger, moet u pipeable-operators gebruiken, zoals weergegeven in het onderstaande codefragment:

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

Dit wordt veroorzaakt doordat het RxJS-team de ondersteuning voor het gebruik heeft verwijderd
Zie de brekende wijzigingenin de changelog van RxJS voor meer info.

Van de changelog:

Operators : Pipeable Operators mogen nu worden geïmporteerd van RXJS zoals SO: import { map, filter, switchMap } from 'rxjs/operators';. Geen diepe invoer.

Antwoord 2, Autoriteit 43%

Dit herzien omdat mijn oplossing hier niet wordt vermeld.

Ik draai hoek 6 met RXJS 6.0 en rende deze fout in.

Hier is wat ik deed om het te repareren:

Ik heb

gewijzigd

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

Om gewoon te zijn:

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

Ik heb de oplossing hier gevonden:

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

Antwoord 3, Autoriteit 16%

Schrijf gewoon deze opdracht in de VS-codeterminal van uw project en start het project opnieuw op.

npm install rxjs-compat

U moet de map-operator importeren door dit toe te voegen:

import 'rxjs/add/operator/map';

Antwoord 4, Autoriteit 8%

voor de hoek 7V

Wijzigen

import 'rxjs/add/operator/map';

Naar

import { map } from "rxjs/operators"; 

en

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

Antwoord 5, Autoriteit 6%

Ik had hetzelfde probleem met Angular 2.0.1 omdat ik waarneembaar was van

import { Observable } from 'rxjs/Observable';

Ik heb mijn probleem op het importeren van importeerbaar op in plaats daarvan

import { Observable } from 'rxjs';

Antwoord 6, Autoriteit 4%

In RXJS 6 Kaart operator gebruikt is gewijzigd
nu moet je het zo gebruiken.

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

Ter referentie
https://www.academind.com/ leer/javascript/rxjs-6-what-changed/#operators-update-path

Antwoord 7, autoriteit 2%

In de nieuwste Angular 7.*.*kun je dit eenvoudig proberen als:

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

En dan kun je deze methodsals volgt gebruiken:

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

Bekijk deze demovoor meer details.

Antwoord 8, autoriteit 2%

installeer rxjs-compat door terminal in te typen:

npm install --save rxjs-compat

importeer dan :

import 'rxjs/Rx';

Antwoord 9

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 bovenstaande functie kun je zien dat ik res.json() niet heb gebruikt omdat ik HttpClient gebruik. Het past res.json() automatisch toe en retourneert Observable (HttpResponse < string>). Je hoeft deze functie niet meer zelf aan te roepen na hoek 4 in HttpClient.

Antwoord 10

In mijn geval zou het niet voldoende zijn om alleen kaart en belofte op te nemen:

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

Ik heb dit probleem opgelost door verschillende rxjs-componenten te importeren als officiële documentatiebeveelt aan:

1) Verklaringen importeren in één app/rxjs-operators.ts-bestand:

// 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) Importeer rxjs-operator zelf in uw service:

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

Antwoord 11

Ik had hetzelfde probleem, ik gebruikte Visual studio 2015 met een oudere versie van typoscript.

Na het upgraden van de extensie is het probleem opgelost.

Downloadlink

Antwoord 12

Ik gebruik Angular 5.2 en wanneer ik import 'rxjs/Rx';gebruik, krijg ik de volgende pluisfout:
TSLint: deze import is op de zwarte lijst, importeer in plaats daarvan een submodule (import-blacklist)

Zie de onderstaande schermafbeelding:

oplossing:
Opgelost door importeren alleen de operators die ik nodig had . Voorbeeld volgt:

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

Dus de fix zou zijn om specifiek alleen de nodige operatoren te importeren.

Antwoord 13

Ik heb ook dezelfde fout geconfronteerd. Eén oplossing die voor mij werkte, was om de volgende regels toe te voegen in uw Service.ts Bestand in plaats daarvan of import 'rxjs/add/operator/map':

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

Voor een voorbeeld, mijn app.service.ts na foutopsporing was als,

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

Antwoord 14

Installeer eenvoudig rxjs-compat om het probleem op te lossen

npm i rxjs-compat --save-dev

en importeer het als onderstaande

import 'rxjs/Rx';

Antwoord 15

Allereerst uitvoering van de installatie zoals hieronder:

npm install --save rxjs-compat@6

Nu moet je rxjsimporteren in service.ts:

import 'rxjs/Rx';

Voila! Het probleem is verholpen.

Antwoord 16

voer gewoon npm install --save rxjs-compatuit om de fout te verhelpen.

Het wordt hier aanbevolen

Antwoord 17

In Angular v10.xen rxjs v6.x

Eerste importeer kaart bovenaan mijn service,

import {map} from 'rxjs/operators';

Dan gebruik ik de kaart zoals deze

return this.http.get<return type>(URL)
  .pipe(map(x => {
    // here return your pattern
    return x.foo;
  }));

Antwoord 18

In de nieuwe versie van de httpClient-module in hoekig, hoeft u het nog niet op deze manier te schrijven:

return this.http.request(request)
      .map((res: Response) => res.json());

maar doe het op deze manier:

return this.http.request(request)
             .pipe(
               map((res: any) => res.json())
             );

Antwoord 19

Ik heb alle mogelijke antwoorden geprobeerd die hierboven zijn gepost, geen enkele werkte,

Ik heb het opgelost door simpelweg mijn IDE opnieuw op te starten, d.w.z. Visual Studio Code

Moge het iemand helpen.

Antwoord 20

Als u na het importeren van ‘rxjs/add/operator/map’ of het importeren van ‘rxjs/Rx’ dezelfde foutmelding krijgt, start u uw Visual Studio-code-editor opnieuw, dan wordt de fout opgelost.

Antwoord 21

voor al die linux-gebruikers die dit probleem hebben, controleer of de map rxjs-compat vergrendeld is. Ik had precies hetzelfde probleem en ik ging naar de terminal, gebruikte de sudo su om toestemming te geven aan de hele rxjs-compat-map en het was opgelost. Dat veronderstelt dat je hebt geïmporteerd

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

in het project.ts-bestand waar de oorspronkelijke .map-fout is opgetreden.

Antwoord 22

Gebruik de functie mapin de functie pipeen het zal uw probleem oplossen.
Je kunt de documentatie hierbekijken.

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

Antwoord 23

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

Antwoord 24

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

voer de opdracht uit

npm install rxjs-compat 

Ik importeer gewoon

import 'rxjs/add/operator/map';

start de vs-code opnieuw, probleem opgelost.

Antwoord 25

Hoek 9:

forkJoin([
  this.http.get().pipe(
    catchError((error) => {
      return of([]);
    })
  ),
  this.http.get().pipe(
    catchError((error) => {
      return of([]);
    })
  ),

Antwoord 26

Met dank aan https://github.com/nagamallabhanu

https://github.com/webmaxru/pwa -workshop-angular/issues/2#issuecomment-395024755

inkapselen

pipe(map(….))

werkte

import { map } from 'rxjs/operators';
courseRef: AngularFireList<any>;
courses$: Observable<any[]>;
this.courseRef = db.list('/tags');
  this.courses$ = this.courseRef.snapshotChanges()
  .pipe(map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() 
  }));
 }));
 this.courses$.subscribe(res=>{
   console.log(res)
 })

Antwoord 27

Als je deze oude manier gebruikt om routeparameters te krijgen

this._route.params
        .map(params => params['id'])

Om het te updaten voor een nieuwe rxjs-versie

Eerst,
importeer de kaart van rxjs-operators.

import { map } from 'rxjs/operators';

Tweede pijp toevoegen,

  this._route.params.pipe(
            map(params => params['id']))

Antwoord 28

De hoekige nieuwe versie ondersteunt geen .map, je moet dit installeren via cmd
npm install –save rxjs-compat
via deze kan je genieten met oude techniek.
Opmerking:
vergeet niet deze regels te importeren.

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