如何使用 Angular 4 调试 rxjs takeWhile 命令？答案

【问题标题】：How to debug rxjs takeWhile command using angular 4?如何使用 Angular 4 调试 rxjs takeWhile 命令？
【发布时间】：2018-01-03 03:59:28
【问题描述】：

我在我的打字稿中使用 rxjs takeWhile 方法在条件为真时运行轮询（定期请求）。但问题是，即使条件为 False，轮询仍在持续运行。我尝试通过保留断点来使用 chrome 开发人员工具对其进行调试，但不幸的是，该断点不适用于 takeWhile 方法。如何在 takeWhile 方法中打印语句或在 takeWhile 方法中放置断点。

Observable.interval(10000)
  .switchMap(() => http.get('/route1'))
  .map((data) => data)
  .takeWhile(() => this.obj.var === 'show_files')
  .subscribe((data: any) => {})

当我加载另一个页面以停止轮询时，我正在将此“this.obj.var”设置为其他内容。我只想轮询用户是否在当前页面中，并在用户导航到任何其他页面时停止轮询，以避免浏览器因 conrinouos 请求而过载。

您能否帮助我了解如何使用 chrome 开发人员工具调试 rxjs 方法

【问题讨论】：

标签： angular typescript rxjs rxjs5

【解决方案1】：

您可以使用 do 运算符记录您的结果

Observable.interval(10000)
.switchMap(() => http.get('/route1')).map((data) =>data)
.do(value=>console.log(value))
.takeWhile(() => this.obj.var === 'show_files').subscribe((data: any) => {})

【讨论】：

【解决方案2】：

您可以更新传递给 takeWhile() 运算符的箭头函数代码：

Observable.interval(10000)
  .switchMap(() => http.get('/route1'))
  .map((data) => data)
  .takeWhile(() => {
     // You can put a breakpoint on next row via chrome developer tools
     const condition = this.obj.var === 'show_files';
     console.log(condition);
     return condition;
   })
  .subscribe((data: any) => {})

【讨论】：