Question

似乎管道无法与反应式表单控件valueChanges一起使用。我已经准备好此https://stackblitz.com/edit/angular-vdeqrz，以便您可以重现该问题。

在文本字段中输入内容。然后输入“ boom”（不带引号）。错误捕获后，控件不再起作用。您可以在此之后验证键入新内容。它不会检测到任何其他输入。

如果刷新页面，则它将再次起作用。

我在这里想念什么吗？

Answer 1

这不是错误。每个Rx流都可以发出零个或多个next通知和一个error或complete通知，但不能两者都发出。

因此，如果您使用throwError，该链将自行处理，因为您永远不会拥有同一链发出两个或多个error通知，这正是您期望的。

显然有很多方法可以避免这种情况。您可以使用不同于throwError的东西，并用一些对象包装输入值。但是那样一来，您将无法在观察者的error处理程序中对其进行处理。

您还可以使用retry和tap来处理错误：

this.query.valueChanges
  .pipe(
    switchMap(d => (d === 'boom') ? throwError(new Error("boom")) :  of(d)),
    tap({ error: err => console.log(err) }),
    retry(),
  )
  .subscribe({
    next: d => console.log(d),
    complete: () => console.log("complete")
  })

您必须在此处使用tap，因为错误永远不会到达观察者。

您的更新演示：https://stackblitz.com/edit/angular-1qfn2z?file=src/app/app.component.ts

Answer 2

是的，您肯定缺少某些东西。

打开控制台（浏览器一个，而不是闪电战一个），看看您实际上有一个错误：

Error: boom
    at SwitchMapSubscriber.eval [as project] (app.component.ts:43)
    at SwitchMapSubscriber._next (switchMap.ts:100)
    at SwitchMapSubscriber.Subscriber.next (Subscriber.ts:102)
    at SafeSubscriber.schedulerFn [as _next] (event_emitter.ts:88)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:270)
    at SafeSubscriber.next (Subscriber.ts:212)
    at Subscriber._next (Subscriber.ts:142)
    at Subscriber.next (Subscriber.ts:102)
    at EventEmitter.Subject.next (Subject.ts:62)
    at EventEmitter.emit (event_emitter.ts:78)

这就是困扰您的应用程序的原因。

Answer 3

rxjs抛出错误操作符将停止再次发出可观察对象，就像您已取消订阅valueChanges可观察对象一样尝试像这样使用throwError运算符，只是抛出新的Error对象

this.query.valueChanges
  .pipe(map(d => (d === 'boom') ? new Error("boom") :  d))
  .subscribe(
    d => console.log(d),
    err => console.log(err),
    () => console.log("complete")
  )

反应角形式随管道变化。这是一个错误吗？

3 个答案: