angular - Ionic : this.http.get(...).map är inte en funktion

I mitt följande kodavsnitt för Ionic 3, även efter att ha lagt till alla importer för rxjs-operatorn map, kvarstår fortfarande problemet.

TypeError: this.http.get(...).map är inte en funktion

mina importer redan tillagda och koden är som följer:

import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/Rx";
import { Injectable } from "@angular/core";
import { HTTP } from "@ionic-native/http";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";

public method(): Observable<any> {
return this.http
  .get(this.getMethodUrl)
  .map(this.extractResponse)
  .catch(this.handleError);
}

RxJs version : 5.2.11

Jonisk :

ionic (Ionic CLI) : 4.0.0

(C:\Users\Genesis-PC\AppData\Roaming\npm\node_modules\ionic)

IonicFramework : ionic-angular 3.9.2 @ionic/app-scripts : 3.1.11

Cordova :

cordova (Cordova CLI) : 8.0.0

Cordova-plattformar : android 7.1.1

System :

NodeJS : v8.11.4 (C:\Program Files\nodejs\node.exe)
npm :6.4.0 OS : Windows 10

Även om den här frågan har diskuterats och lösts på StackOverflow tidigare, fungerar ingen av dem för mig.

All hjälp kommer att uppskattas djupt!

Svar #1

Enligt den officiella Ionic-dokumentationen (https://ionicframework.com/docs/native/http/) är returtypen för HTTP.get Promise<HTTPResponse>, inte Observable. Därför kan du inte använda Observable-operatörer på den typen.

För att skapa en Observable från ett Promise (RxJS 5), använd helt enkelt:

import { Observable } from 'rxjs/Observable';
let httpResult$ =  Observable.fromPromise(this.http.get(this.getMethodUrl));

Här är din kod med användning av Observable:

import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/Rx";
import { Injectable } from "@angular/core";
import { HTTP } from "@ionic-native/http";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";

public method(): Observable<any> {
return Observable.fromPromise(this.http
  .get(this.getMethodUrl))
  .map(this.extractResponse)
  .catch(this.handleError);
}

För RxJS 6+, använd den nya from-operatorn:

import { from } from 'rxjs';
let httpResult$ =  from(this.http.get(this.getMethodUrl));

Obs: Ditt IDE kanske inte är korrekt konfigurerat, detta typfel bör visas omedelbart (markerat i rött).

Svar #2

om du använder RXJS 6, använd pipe

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

public method(): Observable<any> {
return this.http
  .get(this.getMethodUrl)
  .pipe(
     map(this.extractResponse),
     catchError(this.handleError)
  )
}

Relaterade artiklar