How to debug Observable values in Angular2 / Types

问题:

I have followed the tutorial for angular 2 and have a search functionality that renders a list of heroes asynchronously.

<div *ngFor="let hero of heroes | async">
    {{hero.name}}
</div>

In the component I have observable heroes:

heroes: Observable<Hero[]>;

Now I have implemented similar functionality in my application by I don't see anything and I don't see any errors either. I opened the debugger in Chrome and tried to check the value of heroes, but it's just some Observable wrapper of course.

Is there any way to see the current/last or some value in the debugger or maybe there is some other technique to debug such issues?

回答1:

There're several article on this topic but most easily use do() operator to see what's going on in your operator chains.

Read more:

• https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/testing.md#debugging-your-rx-application

• How to debug rxjs5?

• http://staltz.com/how-to-debug-rxjs-code.html

• https://react.rocks/example/rxvision

• http://jaredforsyth.com/2015/03/06/visualizing-reactive-streams-hot-and-cold/

回答2:

First of all, if you're using typescript consider:

heroes: Observable<Array<Hero>>;

If you want to print it, you can simply add in your code:

heroes.subscribe((v) => console.log('got new heroes list: ', v));

回答3:

You can use the do() operator EX :

this.http
        .get('someUrl', options)
        .map(res => res.json())
        .do(
            data => {
                console.log(data);
            },
            error => {
                console.log(error)
            }
        )

If nothing happens inside the do() functions it means you are not subscribed to that observable, remember that observables are waiting for a subscription to start doing something.

回答4:

In RxJS v6+, the tap() operator has replaced do(). So it will look more like this now:

someObservable$.pipe(
  map(x => x.whatever),
  tap(whatever => console.log(whatever)),
)