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

Question

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

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

这个类似问题的答案没有解决我的问题：。

我正在使用 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 更新日志中的 breaking changes。

来自更新日志：

operators: Pipeable operators must now be imported from rxjs like so: import { map, filter, switchMap } from 'rxjs/operators';. No deep imports.

Answer 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';

Answer 3

我在 Angular 2.0.1 中遇到了同样的问题，因为我从

导入了 Observable

import { Observable } from 'rxjs/Observable';

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

import { Observable } from 'rxjs';

Answer 4

我有同样的问题，我使用的是 Visual studio 2015，它有一个旧版本的打字稿。

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

Download Link

Answer 5

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

见下方截图：

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

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

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

Answer 6

重新访问此内容，因为此处未列出我的解决方案。

我运行 Angular 6 with rxjs 6.0 和运行进入这个错误。

这是我修复它的方法：

我改了

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

简单地是：

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

我在这里找到了修复：

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

Answer 7

我尝试了上面发布的所有可能的答案 none，其中

I resolved it by simply restarting my IDE i.e., Visual Studio Code

希望对某人有所帮助。

Answer 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

Answer 9

只需在你项目的VS Code终端中写下这条命令，然后重启项目即可。

npm install rxjs-compat

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

import 'rxjs/add/operator/map';

Answer 10

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

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

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

Answer 11

我也遇到了同样的错误。一种对我有用的解决方案是在 service.ts 文件 instead 中添加以下行 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));
    }
}

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

Answer 13

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

Answer 14

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

Answer 15

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

npm i rxjs-compat --save-dev

然后像下面这样导入它

import 'rxjs/Rx';

Answer 16

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

npm install --save rxjs-compat

然后导入：

import 'rxjs/Rx';

Answer 17

首先运行安装如下：

npm install --save rxjs-compat@6

现在您需要在 service.ts 中导入 rxjs:

import 'rxjs/Rx';

瞧！问题已解决。

Answer 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代码，问题解决。

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

Answer 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 了解更多详情。

Answer 21

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

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

Answer 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() 和 returns Observable (HttpResponse < string>)。在 HttpClient.

中 angular 4 之后，您不再需要自己调用此函数

Answer 23

只是运行 npm install --save rxjs-compat 它修复了错误。

It is recommended here

Answer 24

Angular 9:

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

Answer 25

感谢https://github.com/nagamallabhanu

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

封装

pipe(map(....))

工作

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

Answer 26

在Angularv10.x和rxjsv6.x

首先在我的服务中导入地图，

import {map} from 'rxjs/operators';

然后我用这样的地图

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

Answer 27

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

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

为新的 rxjs 版本更新它

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

import { map } from 'rxjs/operators';

第二次添加管道，

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

Answer 28

在angular的新版httpClient模块中，你还没有这样写:

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

但这样做：

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

Answer 29

我有同样的问题，我按照下面的方法解决了

import { map } from 'rxjs/operators'; // imports statement 

return this.auth.user$.pipe(
  map(user =>{
    if(user) return true;
        this.router.navigate(['/login'], { queryParams: {returnUrl :state.url}});
    return false;
  }));
}

可观察类型存在问题，该类型为 null，因此我添加了类型 any，它有助于清除许多错误

user$: Observable<firebase.User | any>;

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

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

angular

typescript1.8