ts 属性 'map' 不存在于类型'Observable<Response>' [重复]

Posted 2023-03-13

【中文标题】ts 属性 \'map\' 不存在于类型\'Observable<Response>\' [重复]

【英文标题】：ts Property 'map' does not exist on type 'Observable<Response>' [duplicate]ts 属性 'map' 不存在于类型'Observable<Response>' [重复]

【发布时间】：2017-06-09 14:06:10

【问题描述】：

我是 angular 和 npm 的新手，但是在学习时，我遇到了一个错误，代码似乎适用于我试图重现的源代码 (here)。

我认为这与我的开发环境有关，但我无法完全理解为什么。

这是我的代码：

return this.http.get('api/cards.json')
 .map((response:Response) => <Card[]>response.json().data)
 .do(data=>console.log(data))
 .catch(this.handleError);

在.map，Visual Studio Code 给我这个错误：

ts 属性“map”在“Observable”类型上不存在

如果我忽略此错误并转到浏览器，我会收到相同的消息。

我用angular-cli 创建了我的项目，而我的角度版本实际上是2.4.4。服务器正在使用ng serve 工具运行。

我做了一些搜索：

property map does not exist on observable response in angular --> 我不使用 Visual Studio 2015，而且我的 Visual Studio Code 是最新的（而且似乎这个错误已经解决了一段时间）。

Angular 2 2.0.0-rc.1 Property 'map' does not exist on type 'Observable<Response>' not the same as issue report -->我的命令行对tsc一无所知，在我完成npm i typescript -g之后（并重新启动VS code和ng serve

知道出了什么问题（我想有些东西不是最新的，但我不知道是什么以及如何更新它）。

【问题讨论】：

你必须在你的模块/组件/服务（无论你在这里写什么）中引用RxJs库作为Observable（从http.get`返回的类型是那个库。角度站点上的教程很好地解释了如何使用Observable<T>，以及如何创建一个参考映射到您想要使用的更常见的方法，例如 RxJs 库中的map。

@Igor ：我认为你是对的。我是否需要做一些特别的事情来“安装”RxJs，因为只是将import Observable from 'rxjs/Observable';添加到我的服务并不能解决问题

在下面查看我的答案，map 被认为是operator，为了加载它，您必须声明一个导入依赖项。由于这是相当常用的运算符（与其他运算符一起使用），因此创建一个公共导入文件然后导入它更容易。这几乎取自 Angular 的帮助/文档。

【参考方案1】：

您必须在您的模块/组件/服务中引用 RxJs 库（无论您在此处写的是什么），因为 Observable（从 http.get 返回的类型）是该库的一部分。 RxJs 有许多可以使用的运算符，例如 map、catch、do 等，但要使用它们，您必须引用它们所在的文件/模块。

角度站点上的教程很好地解释了您如何使用Observable<T>，以及如何创建参考映射到您想要使用的更常见的方法，例如RxJs 库中的映射。通过创建一个引用RxJs 库中更常用的运算符和类型的单个文件，您只需在要使用这些类型的地方引用该参考文件，这样就不必重新添加所有运算符/类型在您想要利用它们的项目中的每个文件中。

这是一个示例文件（在本示例中名为 rxjs-operators.ts），其中包含一些更常用的方法。

// Observable class extensions
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';

// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';

在您想使用.map（或任何其他方法）的文件顶部添加此行。

import './rxjs-operators';

【讨论】：

谢谢，我所学的课程也解释了这一点。展示完演示后，我猜我太不耐烦了：（

这对我不起作用。我在我的服务 ts 文件的第一行导入 rxjs/add/operator/map 并且仍然得到属性 'map' 不存在错误