如何在 Angular 项目中导入 rxjs 的地图属性，错误：“Observable<Object>”类型上不存在属性“地图”？

Question

我正在使用 http post 请求和 rxjs 以角度在服务器上放置数据，但即使在导入 rxjs 的 map 属性之后，这也会出现错误。

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

Answer 2

• 从 RxJS v6 及更高版本开始，不支持直接在 Observables 上调用运算符。请改用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 3

如果你使用的是 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。