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

Question

我试图从Angular调用API，但出现以下错误：

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

这个类似问题的答案没有解决我的问题: Angular 2 beta.17: Property 'map' does not exist on type 'Observable<Response>'.

我正在使用Angular 2.0.0-beta.17版本。

- Malik Kashmiri

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 的变更日志中的 breaking changes 。

从变更日志中得知：

operators:现在必须像这样从 rxjs 中导入可管道操作符：import { map, filter, switchMap } from 'rxjs/operators';。不再支持深度导入。

- Thierry Templier

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Thierry Templier

到目前为止，我还没有导入这个类。 - Malik Kashmiri

好的，你间接使用了Observables。我认为这是与你所使用的rxjs版本相关的问题。请参见https://github.com/ocombe/ng2-translate/issues/81。你能告诉我你所使用的Angular2和Rxjs的版本吗？ - Thierry Templier

我正在使用Angular 2 RC1和rxjs 5.0.0-beta2。我已经导入了Observable，如import {Observable} from 'rxjs/observable';并且像import 'rxjs/add/operator/map';这样导入了map操作符。当我使用Beta 7时它是工作的。我刚刚升级到RC1，但它现在无法工作。 - Darshan Puranik

首先，在您的项目中的 VS Code 终端中输入以下命令并重新启动项目：npm install rxjs-compat，然后导入map操作符。 - Karan Raiyani

Answer 2

重新回顾这个问题，因为我的解决方案在这里没有列出。

我正在使用 Angular 6 和 rxjs 6.0，并遇到了这个错误。

以下是我解决它的方法：

我进行了更改。

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

只是存在

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

我在这里找到了解决方法：

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

- Nick Hodges

---

我不确定为什么迁移工具rxjs-5-to-6-migrate没有发现这个问题？有趣的是，它没有解决do/tap重映射的问题，在我的环境中，即使导入工具识别到了它，这个问题仍然未解决。在Angular开发中，我90%的“意外浪费时间”都花在RxJS文档和代码边界问题上，这真的很令人沮丧。 - Joe

谢谢！你真是救星！！对于感兴趣的人，这个变化的完整参考资料在这里：https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#howto-convert-to-pipe-syntax - malvadao

这对我很有用，我还需要添加 import { map } from 'rxjs/operators';。 - paul

有趣的是，这正是我们在升级到Angular 6时解决它的方式 - 这也带来了最新的rxjs。 - Max

谢谢。关于.catch，我们可以使用catchError，例如.pipe(catchError(this.handleError))? - FindOutIslamNow

@FindOutIslamNow，感谢你关于catchError的回答。在解决另一个问题后，我使用了它 :) - Nisanur

Answer 3

只需在项目的VS Code终端中输入此命令并重新启动项目。

npm install rxjs-compat

您需要通过添加以下内容来导入map运算符：

import 'rxjs/add/operator/map';

- Karan Raiyani

---

如果无法正常工作，请关闭所有文件并重新启动VS Studio。 - Ajay Takur

Answer 4

对于 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()));

- Nadeem Qasmi

---

它帮助了我@Katana24，因为我看到了正确的管道语法。 - punkologist

该解决方案在 Angular 10 中运行良好，无需安装 rxjs-compat，否则会出现警告，如“修复 CommonJS 或 AMD 依赖项可能导致优化中止”。 - mrapi

你如何通过它访问JSON对象？当我尝试使用console.log()打印JSON字符串时，我只得到一个Observable<Any>对象？ - Eric

这显然是使用 Angular 12 的正确方式。谢谢！ - Sylvain Rodrigue

Answer 5

我在使用Angular 2.0.1时遇到了同样的问题，因为我从...导入了Observable

import { Observable } from 'rxjs/Observable';

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

import { Observable } from 'rxjs';

- S.Galarneau

---

这种做法被认为不够友好，因为该语句将 Observable 的所有运算符（包括您不使用的运算符）全部导入到捆绑包中，从而增加了捆绑包的大小。相反，您应该逐个导入每个运算符。我建议使用“可导入运算符”，它在 RxJS v5.5 中引入以支持更好的树摇优化。 - Sarun Intaralawan

Answer 6

在rxjs 6中，map操作符的用法已经改变，现在你需要像这样使用它。

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

参考链接： https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

- Hari Prasad Sharma

---

请注意此答案，因为使用 RxJS v6 的任何人都需要使用 .pipe()，否则没有运算符会直接从 Observable 中工作。您将看到一个错误，如“属性 'share' 不存在于类型 'Observable <{}>' 上”。 - atconway

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

- mkamal

Answer 8

在最新的 Angular 7.*.* 版本中，你可以简单地尝试以下内容：

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

然后您可以按照以下方式使用这些方法：

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

Check this demo for more details.

- Hearen

Answer 9

只需在终端中键入以下命令即可安装rxjs-compat：

npm install --save rxjs-compat

然后导入：

import 'rxjs/Rx';

- Amir.S

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>）。在Angular 4及更高版本中，您不再需要自己调用此功能。

- Dushan