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

【问题标题】：Property 'map' does not exist on type 'Observable<Response>''Observable<Response>' 类型上不存在属性 'map'
【发布时间】：2016-09-09 13:54:53
【问题描述】：

我正在尝试从 Angular 调用 API，但收到此错误：

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

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

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

【问题讨论】：

标签： angular typescript1.8

【解决方案1】：

需要导入map操作符：

import 'rxjs/add/operator/map'

或更笼统地说：

import 'rxjs/Rx';

注意：对于 RxJS 6.x.x 及以上版本，您必须使用可管道运算符，如下面的代码 sn-p 所示：

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 导入 Pipeable 运算符，如下所示：import { map, filter, switchMap } from 'rxjs/operators';。没有深度导入。

【讨论】：

扩充中的模块名称无效，找不到模块“../../Observable”。 'Observable' 类型上不存在属性'map'。
如何导入Observable 类？像这样：import {Observable} from 'rxjs/Observable'; 或 import {Observable} from 'rxjs/Rx';?
目前我还没有导入这个类
我正在使用 Angular 2 RC1 和 rxjs 5.0.0-beta2。我已将 Observable 作为 import {Observable} from 'rxjs/observable' 导入；和导入的地图运算符，如 import 'rxjs/add/operator/map'；当我使用 Beta 7 时它可以工作。我刚刚升级到 RC1，它坏了。
先在你的项目的vs code终端中写入这个命令，然后重启项目。 npm install rxjs-compat ，而不是导入 map 运算符。

【解决方案2】：

就我而言，仅包含 map 和 promise 是不够的：

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

我按照official documentation 的建议导入了几个 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';

【讨论】：

我觉得在每个服务中都包含 rxjs-operators 是不对的。它应该只包含在 app.module.ts 中，但不幸的是，如果未在特定位置导入运算符，则 ng test 会引发错误

【解决方案3】：

我在使用 Angular 2.0.1 时遇到了同样的问题，因为我是从

导入 Observable

import { Observable } from 'rxjs/Observable';

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

import { Observable } from 'rxjs';

【讨论】：

这种做法被认为对包大小不友好，因为该语句将Observable 的所有运算符（包括您不使用的运算符）导入到包中。相反，您应该单独导入每个运算符。我推荐使用 RxJS v5.5 中引入的“lettable 操作符”来支持更好的 tree-shaking。

【解决方案4】：

我遇到了同样的问题，我使用的是 Visual Studio 2015，它的 typescript 版本较旧。

升级扩展后问题得到解决。

Download Link

【讨论】：

【解决方案5】：

我使用的是 Angular 5.2，当我使用 import 'rxjs/Rx'; 时，它会抛出以下 lint 错误： TSLint：此导入已列入黑名单，请改为导入子模块（import-blacklist）

请看下面的截图：

解决方案： 通过仅导入我需要的运算符解决了这个问题。示例如下：

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

因此解决方法是只专门导入必要的运算符。

【讨论】：

@AndrewBenjamin 我强烈建议您这样做。这将为您省去很多麻烦。

【解决方案6】：

由于我的解决方案未在此处列出，因此重新访问。

我正在使用 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

【讨论】：

我不确定为什么迁移工具 rxjs-5-to-6-migrate 不支持这个？有趣的是，它没有解决在我的环境中仍然未解决的 do/tap 重新映射，即使导入工具识别它。我在 Angular 开发中 90% 的“意外浪费时间”都花在了 RxJS 文档和代码边界问题上，这真的很令人沮丧。
谢谢！你是救命稻草！！有兴趣的人可以在这里查看此更改的完整参考：github.com/ReactiveX/rxjs/blob/master/…
这对我有用，我还需要添加import { map } from 'rxjs/operators';
有趣，这正是我们在 Angular 6 升级中修复它的方式——它也带来了最新的 rxjs。
@paul 谢谢。关于.catch，我们可以像.pipe(catchError(this.handleError))一样使用catchError？

【解决方案7】：

我尝试了上面发布的所有可能的答案，但都没有奏效，

我通过简单地重新启动我的 IDE 即 Visual Studio Code 解决了这个问题

愿它对某人有所帮助。

【讨论】：

【解决方案8】：

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

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

【讨论】：

请注意这个答案，因为任何执行RxJS v6 的人都需要使用.pipe()，否则任何操作员都不会直接在 Observable 上工作。您会看到类似Property 'share' does not exist on type 'Observable<{}>' 的错误

【解决方案9】：

只需在项目的 VS Code 终端中编写此命令并重新启动项目即可。

npm install rxjs-compat

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

import 'rxjs/add/operator/map';

【讨论】：

如果它不起作用关闭所有文件并重新启动vs studio。

【解决方案10】：

对于所有遇到此问题的 linux 用户，请检查 rxjs-compat 文件夹是否已锁定。我遇到了同样的问题，我进入终端，使用 sudo su 授予整个 rxjs-compat 文件夹的权限，并且已修复。那是假设你进口了

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

在发生原始 .map 错误的 project.ts 文件中。

【讨论】：

【解决方案11】：

我也遇到了同样的错误。对我有用的一种解决方案是在您的 service.ts 文件中添加以下行而不是 import 'rxjs/add/operator/map'：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

举个例子，我的app.service.ts调试后是这样的，

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class AppService {
    constructor(private http: HttpClient) {}
    getData(): Observable<any> {
        return this.http.get('https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22')
        .pipe(map(result => result));
    }
}

【讨论】：

【解决方案12】：

在pipe 函数中使用map 函数，它将解决您的问题。您可以查看文档here。

this.items = this.afs.collection('blalal').snapshotChanges().pipe(map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Items;
    data.id = a.payload.doc.id;
    return data;
  })
})

【讨论】：

【解决方案13】：

如果在导入 import 'rxjs/add/operator/map' 或 import 'rxjs/Rx' 后也遇到同样的错误，请重新启动 Visual Studio 代码编辑器，错误将得到解决。

【讨论】：

【解决方案14】：

npm install rxjs@6 rxjs-compat@6 --save

【讨论】：

【解决方案15】：

只需安装rxjs-compat即可解决问题

npm i rxjs-compat --save-dev

然后像下面这样导入

import 'rxjs/Rx';

【讨论】：

【解决方案16】：

只需在终端输入安装 rxjs-compat：

npm install --save rxjs-compat

然后导入：

import 'rxjs/Rx';

【讨论】：

【解决方案17】：

首先运行安装如下：

npm install --save rxjs-compat@6

现在你需要在service.ts中导入rxjs：

import 'rxjs/Rx';

瞧！问题已解决。

【讨论】：

【解决方案18】：

  import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';

  @Injectable({
  providedIn: 'root'
  })
  export class RestfulService {

  constructor(public http: Http) { }

 //access apis Get Request 
 getUsers() {
 return this.http.get('http://jsonplaceholder.typicode.com/users')
  .map(res => res.json());
  }

 }

运行命令

 npm install rxjs-compat

我只是导入

 import 'rxjs/add/operator/map';

重启vs代码，问题解决。

【讨论】：

【解决方案19】：

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

【讨论】：

它帮助了我@Katana24，因为我看到了正确的管道语法。
该解决方案在 Angular 10 中运行良好，不需要安装 rxjs-compat，它会发出警告，如“修复 CommonJS 或 AMD 依赖项可能导致优化救助”
如何通过this访问JSON对象？当我尝试使用 console.log() 打印 JSON 字符串时，我只得到一个 Observable 对象？
显然，这是使用 Angular 12 的方式。谢谢！

【解决方案20】：

在最新的 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);
      })
    );
  }

查看demo 了解更多详情。

【讨论】：

【解决方案21】：

angular新版本不支持.map 需要通过cmd安装 npm install --save rxjs-compat 通过这个你可以享受旧技术。笔记：不要忘记导入这些行。

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

【讨论】：

这个迟到的答案是多余的。

【解决方案22】：

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 )。在 HttpClient 的 angular 4 之后，你不再需要自己调用这个函数了。

【讨论】：

【解决方案23】：

只需运行npm install --save rxjs-compat 即可修复错误。

It is recommended here

【讨论】：

请不要忘记导入'rxjs/add/operator/map'

【解决方案24】：

角度 9：

 forkJoin([
  this.http.get().pipe(
    catchError((error) => {
      return of([]);
    })
  ),
  this.http.get().pipe(
    catchError((error) => {
      return of([]);
    })
  ),

【讨论】：

【解决方案25】：

感谢https://github.com/nagamallabhanu

https://github.com/webmaxru/pwa-workshop-angular/issues/2#issuecomment-395024755

封装

管道（地图（....））

工作

import { map } from 'rxjs/operators';

courseRef: AngularFireList<any>;
courses$: Observable<any[]>;

this.courseRef = db.list('/tags');
  this.courses$ = this.courseRef.snapshotChanges()
  .pipe(map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() 
  }));
 }));
 this.courses$.subscribe(res=>{
   console.log(res)
 })

【讨论】：

【解决方案26】：

在 Angular v10.x 和 rxjs v6.x

首先导入我的服务顶部的地图，

import {map} from 'rxjs/operators';

然后我像这样使用地图

return this.http.get<return type>(URL)
  .pipe(map(x => {
    // here return your pattern
    return x.foo;
  }));

【讨论】：

【解决方案27】：

如果您使用这种旧方式获取路由参数

 this._route.params
        .map(params => params['id'])

为新的 rxjs 版本更新它

首先，从 rxjs 运算符导入地图。

import { map } from 'rxjs/operators';

第二次添加管道，

   this._route.params.pipe(
            map(params => params['id']))

【讨论】：

【解决方案28】：

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

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

但是这样做：

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

【讨论】：