Question

我正在尝试从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。

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＆＃39;更新日志了解更多信息。

来自更改日志：

运算符：现在必须从rxjs导入可管理运算符，如下所示：import { map, filter, switchMap } from 'rxjs/operators';。没有深度进口。

Answer 2

重新审视此原因，因为此处未列出我的解决方案。

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

希望有所帮助。

Answer 3

只需在项目的vs代码终端中编写此命令，然后重新启动项目。

npm install rxjs-compat

您需要通过编写此代码来导入map运算符：

import 'rxjs/add/operator/map';

Answer 4

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

导入了Observable

"select * from user where id in (:id_0,:id_1,:id_2,:id_3) and status = :status"

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

// now prepare your statement like before...
$stmt = $em->getConnection()->prepare($sql);

// ...bind all the params in one go...
$stmt->execute($params);

// ...and get your results!
$result = $stmt->fetchAll();

Answer 5

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

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 6

对于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 7

在我的情况下，仅包括地图和承诺是不够的：

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

我通过导入几个rxjs组件解决了这个问题，因为official documentation建议：

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 8

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

npm install --save rxjs-compat

然后导入：

import 'rxjs/Rx';

Answer 9

在最新的 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 10

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

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

但是这样做：

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

Answer 11

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之后，您不再需要自己调用此函数。

Answer 12

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

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

Download Link

Answer 13

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

见下面的截图：

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

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

因此修复方法是仅导入必要的操作符。

Answer 14

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

我只需重新启动IDE即Visual Studio Code
就解决了这个问题

可能对某人有所帮助。

Answer 15

首先运行安装，如下所示：

npm install --save rxjs-compat@6

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

import 'rxjs/Rx';

Voila！该问题已解决。

Answer 16

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

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 17

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

npm i rxjs-compat --save-dev

并按如下所示导入它

import 'rxjs/Rx';

Answer 18

如果在导入导入“ rxjs / add / operator / map”或导入“ rxjs / Rx”后，您也遇到相同的错误，然后重新启动Visual Studio代码编辑器，该错误将得到解决。

Answer 19

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

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

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

。

Answer 20

在map函数中使用pipe函数，它将解决您的问题。您可以查看文档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 21

npm安装rxjs @ 6 rxjs-compat @ 6-保存

Answer 22

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

Answer 23

 it('should render appropriate message when user has not read permissions', 
     inject([UserService, AnotherService], (userServiceStub: UserService, 
            anotherServiceStub: AnotherService ) => {
            let message = debugElement.query(By.css('h2'));
            expect(message).toBe('you have no permissions');
       }));

运行命令

  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

重新启动vs代码，问题已解决。

Answer 24

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

It is recommended here

Answer 25

角度9：

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

Answer 26

感谢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 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新版本不支持.map，您必须通过cmd安装它 npm install-保存rxjs-compat 通过这个你可以享受旧技术。注意：不要忘记导入这些行。

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

物业＆＃39;地图＆＃39;在类型＆＃39; Observable <response>＆＃39;

28 个答案: