使用Angular2异步管道处理错误

Question

我正在使用Angular2异步管道将值流式传输到DOM中.这是一个简单的例子:

const stream = Observable.interval(1000)
  .take(5)
  .map(n => { if (n === 3) throw "ERROR"; return n; });

<div *ngFor="for num of stream | async">
  {{num}}
</div>

<div id="error"></div>

我想要做的是显示1-5的序列,但在错误项目(3)上,以某种方式#error用错误消息填充div.

这似乎需要两件事:第一个是Angular异步管道能够做出智能错误的能力,我认为没有任何迹象.看一下源代码,显然它抛出了一个JS异常,这似乎不太友好.

其次是错误后重启或继续序列的能力.我已阅读catch和onErrorResumeNext等,但它们都涉及将被切换到上一个错误的另一个序列.这使得生成流的逻辑变得非常复杂,我想在其上放置一系列数字(在这个简单的例子中).我有一种下沉的感觉,一旦发生错误,游戏结束并且可观察完成,并且只能用不同的可观察量"重新启动".我还在学习可观察的东西; 事实上这是事实吗？

所以我的问题是双重的:

1. Angular2的异步管道可以做一些智能的错误吗？
2. 在观察到错误后,observables有一些简单的方法可以继续吗？

Answer 1

是的,你对捕获操作符是正确的,并且在发生错误后能够做某事......

我会利用catch运算符来捕获错误并执行某些操作:

const stream = Observable.interval(1000)
  .take(5)
  .map(n => {
    if (n === 3) {
      throw Observable.throw(n);
    }
    return n;
  })
  .catch(err => {
    this.error = error;
    (...)
  });

并在模板中:

<div>{{error}}</div>

为了能够继续初始observable,您需要从发生错误的位置开始创建一个新的observable:

createObservable(i) {
  return Observable.interval(1000)
    .range(i + 1, 5 - i)
    .take(5 - i)
  });
}

并在catch回调中使用它:

  .catch(err => {
    this.error = error;
    return this.createObservable(err);
  });

这两个问题可以帮助您:

• 如何在RxJS5中恢复错误(或类似)
• Ajax错误后RxJS继续监听(最后一个答案)

Answer 2

1)否,async管道订阅并取消订阅并返回它收到的事件.您需要在收到async管道之前处理错误.

2)您可以使用catch运算符,当它返回一个observable时,它的值将由.catch(err => Observable.of(-1))而不是错误发出 .

您可以使用它来发出特殊的"错误"值,然后使用类似的*ngIf="num === -1方式以某种特殊方式显示错误值.

你可以在这个https://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html上找到更多相关信息.