类型'Observable <Response>'上不存在属性'map'

Question

我试图从Angular调用API但是我收到此错误:

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

这个类似问题的答案并没有解决我的问题:Angular 2 beta.17:'Observable <Response>'类型中不存在属性'map'.

我正在使用Angular 2.0.0-beta.17.

Answer 1

您需要导入map运算符:

import 'rxjs/add/operator/map'

或者更一般地说:

import 'rxjs/Rx';

注意:对于RxJS 6.x.x及更高版本,您必须使用可管道运算符,如下面的代码片段所示:

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

这是因为RxJS团队取消了对使用的支持请参阅RxJS'changelog中的重大更改以获取更多信息.

来自更改日志:

运算符:现在必须从rxjs导入可管理运算符,如下所示:import { map, filter, switchMap } from 'rxjs/operators';.没有深度进口.

Answer 2

重新审视这个,因为我的解决方案没有列在这里.

我用rxjs 6.0运行Angular 6并遇到了这个错误.

这是我做的修复它:

我变了

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

简单地说:

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

我在这里找到了修复:

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

希望有所帮助.

Answer 3

只需在项目的vs代码终端中编写此命令,然后重新启动项目.

npm install rxjs-compat

你需要map通过写这个来导入运算符:

import 'rxjs/add/operator/map';

Answer 4

我在Angular 2.0.1中遇到了同样的问题,因为我从中导入了Observable

import { Observable } from 'rxjs/Observable';

我解决了从此路径导入Observable的问题

import { Observable } from 'rxjs';

Answer 5

对于Angular 7v

更改

import 'rxjs/add/operator/map';

至

import { map } from "rxjs/operators"; 

和

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

Answer 6

在rxjs 6中,地图操作员的使用情况已经改变,现在您需要像这样使用它.

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

供参考 https://www.academind.com/learn/javascript/rxjs-6-what-c​​hanged/#operators-update-path

Answer 7

在新版本的 Angular 中的 httpClient 模块中，你还没有这样写：

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

但这样做：

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

Answer 8

在最新的Angular 7。*。*中，您可以尝试以下操作：

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

然后，您可以methods按以下方式使用它们：

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

查看此演示以获取更多详细信息。

Answer 9

只需在终端输入即可安装rxjs-compat:

npm install --save rxjs-compat

然后导入:

import 'rxjs/Rx';

Answer 10

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

在上面的函数中，您可以看到我没有使用 res.json()，因为我使用的是 HttpClient。它自动应用 res.json() 并返回 Observable (HttpResponse <string>)。您不再需要在 HttpClient 中的 angular 4 之后自己调用此函数。

Answer 11

在我的情况下,仅包括地图和承诺是不够的:

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

我通过导入几个rxjs组件解决了这个问题,正如官方文档建议:

1)在一个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)在您的服务中导入rxjs-operator本身:

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