Pipe not correctly mapping and error handling Angular

4234 views angular
-3

I have a method in a service which returns an Observable. When I subscribe to the observable when I call the method in my component everything works fine and i get my account properly:

this.service.getAccountDetails(username)
    .subscribe(account =>{
        this.podcasts.push(account);
    });

However when I tried to implement this using a pipe with a map and catchError it returns nothing.

this.service.getAccountDetails(username)
    .pipe(
        map(account => {
            this.podcasts.push(account);
        }),
        catchError((error: Error) => {
            //Do some error stuff
            return of(null);
        })
    );

The method in the service I call looks like this:

getAccountDetails(u:String): Observable<Object> { }

Obviously I must have some annoying syntax error, but for the love of God I can't find it. Please help!

answered question

You must subscribe(), otherwise the request is never sent, and the pipeline of operations is never executed. map() is supposed to transform an event into something else, not to trigger side-effects.

You're not returning anything from map()

1 Answer

4

Change it to something like this, as JB Nizet mentioned in the comment, you must subscribe,

this.service.getAccountDetails(username)
.pipe(
  catchError(this.errorHandler)
)
.subscribe((username) => this.podcasts.push(username););

and

   errorHandler(error: Error): Observable<any> {
    console.error('ERROR HANDLER', error);
    return new EmptyObservable();
  }

posted this

Have an answer?

JD

Please login first before posting an answer.