angular – FormControl.detectchanges – 为什么要使用distinctUntilChanged？

阅读 How to use RxJs distinctUntilChanged?和 this,似乎distinctUntilChanged改变输出流只提供不同的连续值.

我认为这意味着如果相同的值立即连续到达,您实际上是过滤流并且只获得该重复值的一次出现.

所以,如果我这样写：

this.myFormControl.valueChanges
  .debounceTime(1000)
  .distinctUntilChanged()
  .subscribe(newValue => {
    console.log('debounced: ',newValue);
  });

我看到输出没有区别：

this.myFormControl.valueChanges
  .debounceTime(1000)
  .subscribe(newValue => {
    console.log('debounced: ',newValue);
  });

我已经看到一些地方建议在表单输入上订阅valueChanges时使用distinctUntilChanged – 但实际上并没有得到原因.

这是一个输入,所以如果用户输入它总是在变化,对吗？这些值将始终是不同的,因此您只需添加一个额外的操作来无缘无故地过滤输入.

或者我在这里遗漏了什么？

编辑

根据我的第一个代码示例使用distinctUntilChanged,我创建了一个带有特朗普先生值的表单输入,并确保它保存在模型中.

然后我点击控件内部并粘贴了特朗普先生.由于值是相同的,我原本预计不会看到任何记录 – 控件具有与之前相同的值,所以distinctUntilChanged肯定应该忽略它？

编辑2

进一步查看我的测试后,这种行为似乎是因为我使用了一个AbstractControls数组：

this.itemsControl = <FormArray>this.form.controls['items']; 
...
this.itemsControl.controls[index].valueChanges...

所以虽然有点奇怪,当输入的值相同时它仍然会触发,我猜我需要连接到这个数组项(表单组)中的实际输入的valueChanges,而不是数组项本身.

编辑3

因此,在将EDIT 2中的代码更改为以下内容后,将已存在的相同值粘贴到输入控件中不会触发valueChanges(如预期的那样).在EDIT 2中,valueChanges挂钩到整个formGroup,而不是单个输入控件(在本例中称为content)：

let fg = this.itemsControl.controls[index]; // get the formGroup
fg['controls'].content.valueChanges
  .debounceTime(1000)
  .distinctUntilChanged()
  .subscribe(newValue => {...});

解决方法

使用debounceTime(1000)意味着我们只在用户停止输入1秒时发送请求,在此期间用户可以写入3个字符然后擦除它们,因此输入值自上次请求后没有改变但是你发送的是请求,以避免您可以使用.distinctUntilChanged()

this.myFormControl.valueChanges
      .debounceTime(1000)
      .distinctUntilChanged()
      .subscribe(newValue => {
        console.log('debounced: ',newValue)
      });