我试图从Angular调用一个API,但得到这个错误:

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

这个类似问题的答案并没有解决我的问题:Angular 2 beta版。17:属性“map”在类型“Observable<Response>”上不存在。

我使用的是Angular 2.0.0-beta.17。


你需要导入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更新日志中的重大更改。

更新日志如下:

operator:可管道操作符现在必须像这样从rxjs中导入:import {map, filter, switchMap} from 'rxjs/operators';没有深度进口。


在我的情况下,只包括地图和承诺是不够的:

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

我按照官方文档的建议导入了几个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';

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

import { Observable } from 'rxjs/Observable';

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

import { Observable } from 'rxjs';

我也有同样的问题,我使用的是Visual studio 2015,它有一个旧版本的typescript。

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

下载链接


我使用的是Angular 5.2,当我使用import 'rxjs/Rx';它抛出我以下lint错误: TSLint:此导入被列入黑名单,改为导入子模块(import-blacklist)

请看下面的截图:

解决方案: 通过只导入我需要的操作符解决了这个问题。例子如下:

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

因此,解决办法是只导入必要的操作符。


再次讨论这个问题,因为我的解决方案没有列在这里。

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


我试了上面所有可能的答案,没有一个成功,

我通过简单地重新启动我的IDE,即Visual Studio Code来解决它

希望它能帮助到别人。


在rxjs 6中,map操作符的用法已经改变 现在你需要像这样使用它。

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


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

npm install rxjs-compat

你需要通过添加这个来导入map操作符:

import 'rxjs/add/operator/map';

对于所有遇到此问题的Linux用户,检查rxjs-compat文件夹是否被锁定。我有这个完全相同的问题,我进入终端,使用sudo su给整个rxjs-compat文件夹的权限,它是固定的。假设你进口了

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

在项目中。原始的.map错误发生在Ts文件中。


我也曾犯过同样的错误。一个对我有效的解决方案是在您的服务中添加以下行。Ts文件而不是导入'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));
    }
}

使用管道函数中的map函数,它将解决您的问题。 您可以在这里查看文档。

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

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


NPM安装rxjs@6 rxjs-compat@6—保存


只需安装rxjs-compat就可以解决这个问题

npm i rxjs-compat --save-dev

然后像下面这样导入它

import 'rxjs/Rx';

安装rxjs-compat只需在terminal中输入:

npm install --save rxjs-compat

然后导入:

import 'rxjs/Rx';

首先运行安装,如下所示:

npm install --save rxjs-compat@6

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

import 'rxjs/Rx'; 

瞧!问题已经解决了。


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


对于Angular 7v

改变

import 'rxjs/add/operator/map';

To

import { map } from "rxjs/operators"; 

And

 return this.http.get('http://localhost/ionicapis/public/api/products')
 .pipe(map(res => res.json()));

在最新的Angular 7中。,你可以简单地尝试:

import { Observable, of } from "rxjs";
import { map, catchError } from "rxjs/operators";

然后你可以使用下面这些方法:

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

查看这个演示以获得更多细节。


angular的新版本不支持.map,你必须通过cmd安装 保存rxjs-compat 通过这个你可以享受老技术。 注意: 不要忘记导入这些行。

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

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


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

这里推荐


角9:

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

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

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

如果你使用这个旧的方法来获取路由参数

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

为新的rxjs版本更新它

首先, 从RXJS操作符中导入映射。

import { map } from 'rxjs/operators';

第二个添加管道,

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

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

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

但你可以这样做:

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

我有同样的问题,我解决它如下

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

有一个问题,可观察类型是空的,所以我添加类型任何,它有助于清除许多错误

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