How to import map property of rxjs in angular project , Error : Property 'map' does not exist on type 'Observable<Object>'?

Question

我在 angular 中使用 http post 请求和 rxjs 在服务器上放置数据，但即使在导入 rxjs 的映射属性之后，这也会出错。

import { Injectable } from '@angular/core';
import {HttpClient,HttpHeaders,HttpErrorResponse} from '@angular/common/http';
import {throwError } from 'rxjs';

import 'rxjs/add/operator/map';

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


  constructor(private http:HttpClient) { }

  registerUser(user){
    let headers = new HttpHeaders();
    headers.append('content-type','application/json');

    return this.http.post('http://localhost:8080/users/register',user,{headers:headers})
          .map(response =>response.json())
          .catch(this.errorHandler)

  }


  errorHandler(error:HttpErrorResponse){
     return throwError(error.message||"Server not responding");
  }

}

我什至像这样导入地图属性：

import {map} from 'rxjs/add/operator';

错误：

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

用户是对象

Answer 1

从 RxJS v6 及更高版本开始，不支持直接在 Observable 上调用运算符。相反，使用 Observable.pipe.
从 RxJS v6 及更高版本开始，对直接导入运算符的支持已被弃用。相反，从 rxjs/operators.
HttpClient（来自 @angular/common/http）默认将响应映射为 JSON。不需要 map 运算符（这是 Http 的前行为（来自 @angular/http））。

请参阅下面的更正示例：

import { /* imports go here */ } from '@angular/common/http';
// ...

// ...
export class AuthService {
  // ...

  registerUser(user){
    let headers = new HttpHeaders();
    headers.append('content-type','application/json');

    return this.http.post('http://localhost:8080/users/register',user,{headers:headers})
          .catch(this.errorHandler);

  }
}

Answer 2

如果您使用的是 RXJS 6 或更高版本，则必须管道操作

 this.http.post('http://localhost:8080/users/register',user,{headers:headers})
 .pipe(map(response => {
   // do something with response and return it
 })
 catchError(this.errorHandler)
  );

此外，如果您使用 HttpClient 而不是 Http，则不需要 response.json()，因为响应将被反序列化 json.

Answer 3

如果您使用的是 RXJS 6 或更高版本，运算符的用法会发生一些变化。

您通过以下方式导入：

import { map, catchError } from 'rxjs/operators';

您在管道运算符内部使用地图，例如：

return this.http.post('http://localhost:8080/users/register',user,{headers:headers})
      .pipe(
          map(response => {
              // doSomething 
          }),
          catchError(error => {
              this.errorHandler(error);
              return of(`Caught an error: ${error}`);
          })
      );

How to import map property of rxjs in angular project , Error : Property 'map' does not exist on type 'Observable<Object>'?

How to import map property of rxjs in angular project , Error : Property 'map' does not exist on type 'Observable<Object>'?

http

rxjs

typescript

mean-stack

angular