响应式表单 valueChanges 方法针对输入字段的一次更改触发两次答案

【问题标题】：Reactive forms valueChanges method fires twice for one change on input fields响应式表单 valueChanges 方法针对输入字段的一次更改触发两次
【发布时间】：2021-08-20 12:48:11
【问题描述】：

我在 Angular 应用程序中工作，其中使用 valueChanges 方法来检测更改。喜欢：

this.MyFrm.controls['is_applicable'].valueChanges.subscribe(values => {
  this.mainFunc()       
});

但是它触发了这个功能两次，为了解决这个问题，我使用了 debounceTime。喜欢：

 this.MyFrm.controls['is_applicable'].valueChanges.pipe(debounceTime(0),distinctUntilChanged(),takeUntil(this.destroy$)).subscribe(values => {
   this.mainFunc()
 });

但现在出现的问题是 valueChanges 在一段时间后触发，这会破坏我的代码流。

有什么建议吗？

【问题讨论】：

这不应该发生。您确定您没有打开 2 个订阅吗？在第一个示例中，我没有看到您取消订阅，因此每次重新加载页面时都会创建一个新订阅。如果这仍然是一个问题，请在例如 stackblitz 中重现该问题。

标签： angular typescript angular11

【解决方案1】：

尝试使用distinctuntilchanged，它是 rxjs 运算符之一。它只会返回唯一值。

 this.MyFrm.controls['is_applicable'].valueChanges.pipe(distinctUntilChanged()).subscribe(values => {
    this.mainFunc()
 });

【讨论】：

我已经用过了，忘了说。我已经更新了问题
如果它使用 distinctUntilChanged 检测到一次更改但仍然延迟，请移除去抖动并仅使用 distinctUntilChanged。
我只使用了 distinctUntilChanged，所谓的 valuechanges 方法被调用了两次。

【解决方案2】：

如果您只想获取第一个响应并使用 distinctUntilChanged() 继续监听 Reactive Form 上的更改，您可以使用 throttleTime(500)，这将发出第一个值，然后忽略下一个响应 0.5 秒。

this.MyFrm.controls['is_applicable'].valueChanges
    .pipe(
      distinctUntilChanged(),
      throttleTime(500),
      takeUntil(this.destroy$)
    )
    .subscribe(values => {
      this.mainFunc()
 });

编辑：由于某种原因，您的表单字段“is_applicable”有两个订阅者，这就是为什么会返回两次相同的响应。

【讨论】：