Question

在下面的Ionic 3代码摘录中，即使为map的rxjs运算符添加了所有导入之后，问题仍然存在。

TypeError：this.http.get（...）。map不是函数

我的导入已经添加，代码如下：

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版本：5.2.11

离子：

ionic（Ionic CLI）：4.0.0

（C：\ Users \ Genesis-PC \ AppData \ Roaming \ npm \ node_modules \ ionic）

IonicFramework：离子角3.9.2 @ ionic / app-scripts：3.1.11

科尔多瓦：

cordova（Cordova CLI）：8.0.0

Cordova平台：Android 7.1.1

系统：

NodeJS：v8.11.4（C：\ Program Files \ nodejs \ node.exe）
  npm：6.4.0   作业系统：Windows 10

即使以前已经在StackOverflow上讨论并解决了此问题，也没有一个对我有用。

任何帮助将不胜感激！

Answer 1

根据官方的Ionic文档（https://ionicframework.com/docs/native/http/），HTTP.get的返回类型为Promise<HTTPResponse>，不可观察。因此，您不能在该类型上使用Observable运算符。

要从Promise（RxJS 5）创建Observable，只需使用：

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

这是使用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);
}

对于RxJS 6+，请使用新的from运算符：

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

注意：您的IDE可能配置不正确，此类型错误应立即出现（标记为红色）。

Answer 2

如果您使用的是RXJS 6，请使用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)
  )
}

Answer 3

离子http.get正在兑现承诺。与成角度的httpClient.get（返回可观察的）不同，因此您有3个解决方案。

更改您的代码以使用promise

this.http .get(this.getMethodUrl) .then(this.extractResponse) // change to .then ...
将您的Ionic http服务替换为角度httpClient.get。不确定为什么不首先使用httpClient.get。
通过使用fromPromise来将诺言转换为可观察到的承诺，如提到的@ggradnig。但是，建议您选择选项2。

离子：this.http.get（...）。map不是函数

3 个答案: