如何在Angular2/Typescript中调试Observable值？

Question

我已经按照角度2的教程进行操作,并且具有搜索功能,可以异步呈现英雄列表.

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

在组件中我有可观察的英雄:

heroes: Observable<Hero[]>;

现在我已经在我的应用程序中实现了类似的功能,我没有看到任何内容,我也没有看到任何错误.我在Chrome中打开调试器并尝试检查英雄的值,但它当然只是一些Observable包装器.

有没有办法在调试器中查看当前/最后或某个值,或者可能还有其他一些技术可以调试这些问题？

Answer 1

关于这个主题有几篇文章,但最容易使用do()运算符来查看运营商链中发生了什么.

阅读更多:

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

• 如何调试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/

Answer 2

在RxJS v6 +中，tap()运算符已替换do()。所以现在看起来更像这样：

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