时间戳

首页 > 解决方案 > 离子：this.http.get(...).map 不是函数

angular - 离子：this.http.get(...).map 不是函数

问题描述

在我下面的 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

离子：

离子（离子 CLI）：4.0.0

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

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

科尔多瓦：

科尔多瓦（科尔多瓦 CLI）：8.0.0

Cordova 平台：安卓 7.1.1

系统：

NodeJS：v8.11.4 (C:\Program Files\nodejs\node.exe)
npm：6.4.0 操作系统：Windows 10

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

任何帮助将不胜感激！

标签： angulartypescriptionic-frameworkrxjsionic3

解决方案

根据官方 Ionic 文档（https://ionicframework.com/docs/native/http/），返回类型HTTP.get是Promise<HTTPResponse>，不是 Observable。因此，您不能在该类型上使用 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+，使用 newfrom运算符：

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

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

推荐阅读