Angular2 InputFormControl 和 ValueChange 连续触发

Posted 2023-03-13

【中文标题】Angular2 InputFormControl 和 ValueChange 连续触发

【英文标题】：Angular2 InputFormControl and ValueChange fires continuously

【发布时间】：2018-05-11 04:01:53

【问题描述】：

我有一个从输入字段检测到输入的简单案例。当输入的值发生变化时，经过很短的去抖动时间后，会调用一个服务，该服务会进行 http 调用并返回一些数据。

但是，服务不是只触发一次或两次，而是在 16-30 次之间调用 api - 即使输入只有 4 个字符，因此应该触发 4 次。

我怀疑这可能与回调有关，或者我错误地实现了 valueChanges 方法。在任何情况下，我都附上了一些代码以供审查，并感谢任何反馈，因为我是 Angular 新手，并且在实施中看不到任何错误。

inputChange(input) 
    this.inputFormControl.valueChanges
        .debounceTime(5000)
        .distinctUntilChanged()
        .switchMap(input => this.userService.search(input))
        .subscribe(data => 
            this.data = data;
        ,
    );

【问题讨论】：

如果你能把 Plunker 或 StackBlitz 放在一起，那就太棒了

没有足够的上下文......就像@ChauTran 说给我们一个stackblitz或其他东西，这样我们就可以提供帮助。

【参考方案1】：

当值更改（假设）并且您也订阅valueChanges时，您正在调用方法inputChange(input)。删除inputChange 方法，直接使用valueChanges：

constructor() 
  this.inputFormControl.valueChanges
    .debounceTime(5000)
    .distinctUntilChanged()
    .switchMap(input => this.userService.search(input))
    .subscribe(data => 
        this.data = data;
    ); 

还记得在组件被销毁时取消订阅！