Angular2 InputFormControl 和 ValueChange 连续触发

Question

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

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

我怀疑这可能与回调有关，或者我错误地实现了 valueChanges 方法。无论如何，我附上了一些代码以供审查，并希望收到任何反馈，因为我是 Angular 的新手，看不到实现中的任何错误。

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

Answer 1

当值发生变化(假设)并且您也订阅valueChanges时，您正在调用方法inputChange(input)。删除 inputChange 方法，只使用 valueChanges:

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

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