Angular 函数在debounceTime后被多次调用

我有一个带有一个字段的反应式表单，当用户停止键入时，我希望将值打印到控制台。为此，当字段中的值更改时，我使用

debounceTime（）

。 我阅读了一些关于使用

debounceTime（）

的问题，但我的代码多次打印最新值，然后检测到更改，并经过debounceTime函数中的时间

表格的输入字段如下所示：

<input matInput formControlName="name" (keyup)="onInputChange()">

如果输入为

test

，控制台中的结果如下图：

---

可能有什么问题？

您正在调用一个函数并在每次按键时订阅，您只需要订阅一次，而不需要调用（keyup）函数，因为这将捕获对输入的任何更改

看起来正在调用的函数可能会导致创建四个订阅，从而在控制台中创建四个条目

<input matInput formControlName="name" (keyup)="onInputChange()">

---

还建议阅读组件销毁时如何处理订阅，因为这不会处理其自身，有很多可用资源。

如其他答案中所述，没有

键控处理程序。只需收听
valueChanges
。由于您想发出http请求，我们可以使用
switchMap
。还记得取消订阅
valueChanges
。如果用户只键入空格，我们可能还想过滤掉。因此，我建议如下：

从'rxjs'导入{Subscription}；
从'rxjs/operators'导入{debounceTime，switchMap，filter}；
// ...
formSub=新订阅（）；
恩戈尼尼特（）{
this.formSub=this.userForm.get（'name'）.valueChanges.pipe(
去BounceTime（500），
过滤器（value=>！！value.trim（）），
开关映射（（值）=>{
//替换为您的请求
返回此.myService.postData（值）
})
//用您的模型替换MyInterface
).subscribe（（数据：MyInterface）=>console.log（数据））
}
恩贡德斯特罗（）{
this.formSub.unsubscribe（）；
}

然后，当您以编程方式设置该值时，问题就出现了。我们可以使用
emitEvent:false
，这不会导致触发
valueChanges
：

this.userForm.get（'name'）.setValue（'my name'，{emitEvent:false}）
谢谢您的回答，但这会引出另一个问题。我希望使用此代码来更新数据库中的名称。因此，在ngOnInit（）中，我给表单字段赋值：this.userForm.controls['name'].setValue（“TheName”）；因此，当启动该字段时，即使用户没有更改名称，也会调用更新名称的代码。如何在函数中使用我的代码？您应该能够在ngoninit中同时使用这两种代码？或者是某种原因阻止了可能先使用setValue位。如果我可以在函数中输入，对我来说会更好，因为我需要这样做只有当用户停止写入时才运行它。在ngOnInit（）中，它将在每次初始化组件时运行，并将创建对数据库的额外点击。我只需添加一个检查，就像res.length make post else do nothing In the subscriptionIt可以工作一样，但将res.length与什么进行比较？
<input matInput formControlName="name" (keyup)="onInputChange()">

<input matInput formControlName="name">

userForm = this.formBuilder.group({
  name: ['']
)};
public originalName = '';

public ngOnInit(): void
{
    this.userService.getUserById(this.userId).subscribe(res => 
    {
      this.originalName = JSON.parse(JSON.stringify(res.name));
      this.userForm.controls['name'].setValue(res.name);

      this.userForm.get("name").valueChanges.pipe(debounceTime(500)).
      subscribe(res => 
      {
        if (res.name !== this.originalName) 
        {
          // logic to post to server
        }
      });
    });
}