角度 5，RxJs { map } 导入不起作用或我遗漏了什么？答案

【问题标题】：angular 5, RxJs { map } import doesn't work or i'm missing something?角度 5，RxJs { map } 导入不起作用或我遗漏了什么？
【发布时间】：2018-08-20 21:30:02
【问题描述】：

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

所以我找到了 2 张地图，但都没有工作...

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 不知道可观察的，

【问题讨论】：

标签： angular angular5 rxjs5

【解决方案1】：

导入 RxJS 操作符的正确“现代”方式是：

import { map } from 'rxjs/operators';

同时使用pipeable operators。

你的代码变成：

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

【讨论】：

太好了，我发现的一切都是关于旧时尚的，所以我不知道管道！所以我确实找到了好的导入，但无法以正确的方式使用它；）非常感谢
@Jeto 你知道为什么“地图”不会被调用吗？
@FourtyTwo 很难说不知道更多关于你得到的错误等等。如果你自己找不到它，你可能想创建一个新问题。

【解决方案2】：

不要像你一样在导入行的末尾添加“地图”。只需写以下内容：

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

【讨论】：

【解决方案3】：

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

从“rxjs”导入{Observable}；

对于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'做什么的人，这里是写在角度页面上的解释

HeroService 方法将利用可观察值流并发送一条消息（通过 log()）到底部的消息区域页面。

他们会使用 RxJS 的 tap 操作符来做这件事，它查看可观察的值，对这些值做一些事情，并传递它们沿着。点击回调不会触及值本身。

【讨论】：