angular 5，RxJs { map } import 不起作用或者我遗漏了什么？

Question

我正在尝试映射我的 httpclient 的结果，我们需要使用新的 RxJs 导入来使 treeshaking 工作。

所以我找到了 2 张地图，但是 none 工作...

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

我们需要删除的旧时尚方式

import 'rxjs/add/operator/map';

这是我开始工作所需的代码！

  getValues(): Observable<Value[]> {   
    return this.http.get<Response<Values>>(this.url).map(reponse => {
      return reponse.data.values;
    });
  }

但是 .map 并不以可观察性而闻名，

Answer 1

导入 RxJS 运算符的正确 "modern" 方法是：

import { map } from 'rxjs/operators';

随着pipeable operators的使用。

您的代码变为：

getValues(): Observable<Value[]> {   
  return this.http.get<Response<Values>>(this.url).pipe(
    map(reponse => reponse.data.values)
  );
}

Answer 2

不要像您一样在导入行的末尾添加 'map'。只需写下以下内容：

import { map } from 'rxjs/operators';

或

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

此外，如果您是 angular 的新手，并且更恰当地说，正在研究 Angular 2，那么下面给出的应该绝对没问题。

import 'rxjs/add/operator/map';

如果还是不行，那么你可以使用管道函数，它可以为你完成工作。它应该是这样的：

getValues(): Observable<Value[]> {   
  return this.http
 .get<Response<Values>>(this.url)
 .pipe(map(reponse => reponse.data.values)
  );
}

Answer 3

即使我在 angular2 中使用 map 和 Observables 来为 get post 进行服务调用，而我的 service.ts 曾经看起来像这样并且它工作得非常好（之前).我只会导入

import {Observable} from "rxjs";

足以 angular2

public init() : Observable<UserData> {
    return this.http.get(this.baseUrl + "/init", this.options)
        .map(SharedService.extractJson)
        .catch(SharedService.handleError);
}

而 components.ts 看起来像这样

init() {
    this.service.init().subscribe((info) => {
        this.metaUser = info;
    }, (error) => {
        console.log(SharedService.getError(error._body));

    });

但最近我尝试使用相同的语法并遇到上述错误。从 2/4 到最新的 Angular 有一些显着的变化，一些方法已被弃用，名称也有一些变化。所以工作代码 (service.ts) 看起来像这样（这些是工作代码的点点滴滴和相应的导入语句）

import {HttpClient} from "@angular/common/http";
import {Observable, of} from "rxjs";
import {catchError, map, tap} from 'rxjs/operators';

getConfig(): Observable<any> {
return this.http.get(this.getDataUrl)
  .pipe(
    tap(_ => console.log('fetched data')),
    catchError(this.handleError('getData', []))
  );}

  private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {

  console.error(error); // log to console instead

  // TODO: better job of transforming error for user consumption
  console.log(`${operation} failed: ${error.message}`);

  // Let the app keep running by returning an empty result.
  return of(result as T);
};}

组件看起来像这样

getData(){
    this.serviceData.getConfig().subscribe((info:any)=>{
      console.log(info);
    },(err:any)=>{
      console.log(err);
    });
  }

好奇'tap'是做什么用的，这里是angular页面

的解释

The HeroService methods will tap into the flow of observable values and send a message (via log()) to the message area at the bottom of the page.

They'll do that with the RxJS tap operator, which looks at the observable values, does something with those values, and passes them along. The tap call back doesn't touch the values themselves.

angular 5，RxJs { map } import 不起作用或者我遗漏了什么？

angular 5, RxJs { map } import doesn't work or i'm missing something?

rxjs5

angular

angular5