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

Question

我在角度应用程序中工作，其中使用 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 一段时间后触发的问题，这破坏了我的代码流。

有什么建议吗？

Answer 1

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

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

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

Answer 2

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

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