Question

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

所以我找到了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不知道observable，

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

Answer 2

不要像导入那样在导入行的末尾添加'map'。请写下以下内容：

import { map } from 'rxjs/operators';

OR

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

此外，如果你是角色的新手，并且更有针对性地处理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中使用了带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语句）

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

对“点击”功能感到好奇的人，这是写在有角度页面上的说明

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

他们将使用RxJS tap操作符执行此操作，该操作符会查看   可观察的值，对这些值进行处理，然后将其传递   沿。点击回拨不会自己触摸值。

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

3 个答案: