Właściwość „map” nie istnieje dla typu „Observable <Response>”

Próbuję wywołać interfejs API z Angular, ale otrzymuję ten błąd:

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

Odpowiedzi na to podobne pytanie nie rozwiązały mojego problemu: Angular 2 beta.17: „Właściwość„ mapa ”nie istnieje dla typu„ Observable <Response> ” .

Używam Angulara 2.0.0-beta.17.

Musisz zaimportować mapoperatora:

import 'rxjs/add/operator/map'

Lub bardziej ogólnie:

import 'rxjs/Rx';

Uwaga: W przypadku wersji RxJS 6.x.xi nowszych konieczne będzie użycie operatorów potokowych, jak pokazano w poniższym fragmencie kodu:

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

Jest to spowodowane usunięciem przez zespół RxJS obsługi używania Zobacz przełamujące zmiany w dzienniku zmian RxJS, aby uzyskać więcej informacji.

Z dziennika zmian:

Operatorzy : operatorzy Pipeable musi teraz być importowane z rxjs tak: import { map, filter, switchMap } from 'rxjs/operators';. Bez głębokiego importu.

Ponownie odwiedzam, ponieważ mojego rozwiązania nie ma tutaj.

Używam Angulara 6 z rxjs 6.0 i napotkałem ten błąd.

Oto, co zrobiłem, aby to naprawić:

Zmieniłam

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

po prostu być:

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

Znalazłem poprawkę tutaj:

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

po prostu napisz to polecenie w terminalu vs vs twojego projektu i zrestartuj projekt.

npm install rxjs-compat

Musisz zaimportować mapoperatora, pisząc to:

import 'rxjs/add/operator/map';

Dla Angulara 7v

Zmiana

import 'rxjs/add/operator/map';

Do

import { map } from "rxjs/operators"; 

I

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

Miałem ten sam problem z Angularem 2.0.1, ponieważ importowałem Observable

import { Observable } from 'rxjs/Observable';

Rozwiązuję problem z importowaniem Observable z tej ścieżki

import { Observable } from 'rxjs';

W rxjs 6 użycie operatora map zostało zmienione, teraz musisz go używać w ten sposób.

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

W celach informacyjnych https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

po prostu zainstaluj rxjs-kompatybil, wpisując terminal:

npm install --save rxjs-compat

następnie zaimportuj:

import 'rxjs/Rx';

W najnowszej wersji Angulara 7. *. * Możesz wypróbować to po prostu jako:

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

A następnie możesz użyć ich methodsw następujący sposób:

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

Sprawdź to demo, aby uzyskać więcej informacji.

W moim przypadku nie wystarczy podać tylko mapę i obiecać:

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

Rozwiązałem ten problem, importując kilka komponentów rxjs zgodnie z oficjalną dokumentacją :

1) Zaimportuj instrukcje do jednego pliku 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) Importuj samego operatora rxjs do swojej usługi:

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

W powyższej funkcji widać, że nie użyłem res.json (), ponieważ używam HttpClient. Automatycznie stosuje res.json () i zwraca Observable (HttpResponse <string>). Nie musisz już wywoływać tej funkcji samodzielnie po kącie 4 w HttpClient.

Miałem ten sam problem, korzystałem z programu Visual Studio 2015, który miał starszą wersję maszynopisu.

Po aktualizacji rozszerzenia problem został rozwiązany.

Link do pobrania

Korzystam z Angulara 5.2, a kiedy import 'rxjs/Rx';go używam , generuje następujący błąd: TSLint: Ten import jest na czarnej liście, zamiast tego zaimportuj submoduł (import-blacklist)

Zobacz zrzut ekranu poniżej:

ROZWIĄZANIE: Rozwiązałem go, importując tylko tych operatorów, których potrzebowałem . Przykład poniżej:

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

Tak więc poprawka polegałaby na importowaniu tylko niezbędnych operatorów.

Po prostu zainstaluj rxjs-kompatybil, aby rozwiązać problem

npm i rxjs-compat --save-dev

I zaimportuj go jak poniżej

import 'rxjs/Rx';

Najpierw uruchom instalację, jak poniżej:

npm install --save rxjs-compat@6

Teraz trzeba importować rxjsw service.ts:

import 'rxjs/Rx'; 

Voila! Problem został naprawiony.

po prostu uruchom npm install --save rxjs-compatto naprawia błąd.

Jest to zalecane tutaj

Próbowałem wszystkich możliwych odpowiedzi zamieszczonych powyżej, żadna z nich nie działała,

Rozwiązałem to po prostu ponownie uruchamiając IDE, tj. Visual Studio Code

Niech to komuś pomoże.

Ja też napotkałem ten sam błąd. Jednym z rozwiązań, który pracował dla mnie było, aby dodać następujące linie w swoim service.ts pliku zamiast z import 'rxjs/add/operator/map':

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

Na przykład mój plik app.service.ts po debugowaniu wyglądał następująco:

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

Jeśli po zaimportowaniu importu „rxjs / add / operator / map” lub importu „rxjs / Rx” również otrzymujesz ten sam błąd, a następnie uruchom ponownie edytor kodu Visual Studio, błąd zostanie rozwiązany.

dla wszystkich użytkowników Linuksa, którzy mają ten problem, sprawdź, czy folder rxjs-zgodny jest zablokowany. Miałem dokładnie ten sam problem i wszedłem do terminalu, użyłem sudo su, aby wyrazić zgodę na cały folder rxjs-kompatybilny i zostało to naprawione. To przy założeniu, że zaimportowałeś

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

w pliku project.ts, w którym wystąpił oryginalny błąd mapy.

Użyj mapfunkcji w pipefunkcji, aby rozwiązać problem. Można sprawdzić dokumentację tutaj .

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 install rxjs @ 6 rxjs-kompatybil @ 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());
  }

 }

uruchom polecenie

 npm install rxjs-compat 

Po prostu importuję

 import 'rxjs/add/operator/map';

uruchom ponownie kod vs, problem rozwiązany.

Nowa, kątowa wersja nie obsługuje .mapy, którą musisz zainstalować za pomocą cmd npm install - zapisz rxjs-compliance dzięki temu możesz cieszyć się starą techniką. Uwaga: nie zapomnij zaimportować tych linii.

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