ts Property 'map' does not exist on type 'Observable'

33 浏览
0 Comments

ts Property 'map' does not exist on type 'Observable'

我对Angular和npm都是新手，但在学习过程中遇到了一个错误，代码似乎在我尝试复制的源代码上可以工作（链接：这里）。

我猜这与我的开发环境有关，但我无法确切理解为什么。

这是我的代码：

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

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

ts Property 'map' does not exist on type 'Observable'

如果我忽略这个错误并进入浏览器，我会得到相同的消息。

我是用angular-cli创建的项目，我的Angular版本实际上是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' not the same as issue report --> 我的命令行不知道tsc，而且我已经执行了npm i typescript -g（并重新启动了VS code和ng serve）。

有什么想法是怎么出错的吗（我猜是某个东西没有更新，但我不知道是什么以及如何更新它）。

0

1 答案

0 Comments

问题的原因是在代码中使用了Observable的map方法，但是在类型上却找不到该方法。解决方法是引入RxJs库，并在需要使用map方法的文件中添加对该方法的引用。

在Angular中，使用http.get方法获取数据时，返回的类型是Observable，而map方法是RxJs库中的一个操作符，需要引入库才能使用。可以通过在模块/组件/服务中引入RxJs库来解决此问题。

可以在一个名为rxjs-operators.ts的文件中引入常用的操作符和类型，然后在需要使用这些操作符和类型的文件中引入这个rxjs-operators.ts文件。这样就不需要在每个文件中都重新添加操作符和类型，节省了代码的重复性。

下面是一个示例的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';

这样就可以在该文件中使用.map方法了。

感谢你的提问，我也在学习的过程中遇到了类似的问题，可能是因为太急于测试了。如果上述方法还不能解决你的问题，请再提供一些具体的代码和错误信息，我们可以一起来解决。

0