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

问题

I'm trying to map the result of my httpclient and we need to use the new import for RxJs to get the treeshaking working.

so i've found 2 map but none work...

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

the old fashion way that we need to remove

import 'rxjs/add/operator/map';

Here is the code i need to get to work!

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

but the .map is not known for the observable,

回答1:

The proper "modern" way to import RxJS operators is:

import { map } from 'rxjs/operators';

Along with the use of pipeable operators.

Your code becomes:

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

回答2:

Don't add 'map' at the end, in the importing line as you did. Just write the following :

import { map } from 'rxjs/operators';

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

Also if you are new to angular and more pertinently, working on Angular 2, then the below given should work absolutely fine.

import 'rxjs/add/operator/map';

If it still doesn't works, then you can use the pipe function which could do the work for you. This is how it should look like :

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

回答3:

Even i used map with Observables in angular2 to make service calls for get post and my service.ts used to look something like this and it was working absolutely fine(Before). I would only import

import {Observable} from "rxjs";

which was sufficient for angular2

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

and the components.ts would look like this

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

    });

but recently i tried to use the same syntax and was getting the above error. There are some notable changes from 2/4 to the latest Angular and some of the methods are deprecated and there are some changes in the name as well. So the working code (service.ts) looks something like this(these are the bits and pieces of the working code with the corresponding import statements)

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

and component looks like this

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

those who are curious what does the 'tap' do, here is the explanation written on the angular page

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.

来源：https://stackoverflow.com/questions/49242391/angular-5-rxjs-map-import-doesnt-work-or-im-missing-something

标签

angular

angular5

rxjs5