Angular 9 如何使用 debouncetime 进行输入更改事件（keyup）答案

【问题标题】：Angular 9 how to use debouncetime for input change event (keyup)Angular 9 如何使用 debouncetime 进行输入更改事件（keyup）
【发布时间】：2020-04-30 18:22:28
【问题描述】：

如何使用去抖动时间在 API 中搜索数据以获取 keyup 输入更改事件。看看下面的代码。它不工作。每次输入更改都会向 API 发出搜索请求。我想在一段时间内向 API 发出搜索请求。

提前谢谢你

.html

 <input matInput (keyup) ="Onsearchinput($event.target.value)">

.ts

Onsearchinput(value){

    debounceTime(500)

    console.log(value)

      this.productService.search_Products(value).subscribe(data => {
        if(data){
          console.log(data)
          this.product_list = data
        }
      })
  }

【问题讨论】：

你试过搜索这个吗？ stackoverflow.com/a/40777621/3375906
问题是我在formArray中使用这个。所以我不能在构造函数或 ngOninit 或 ngAfterviewinit 中编写代码。如果我在 keyup 事件中使用去抖动时间，则每次输入更改都会发生搜索操作
然后显示 formArray 的完整代码。否则，我们将不知道您的困难是什么。
跟这篇文章有关系吗？ stackoverflow.com/questions/61503425/…

标签： javascript angular rxjs angular9

【解决方案1】：

表单控件会将其值的更改公开为名为@987654321@ 的可观察对象。您将需要使用pipe 运算符，将valueChanges 输入其中。你不能像上面那样只打电话给debounceTime。

您还需要使用switchMap 之类的东西来确保如果用户在请求进行时键入内容，则任何进行中的请求都会被取消。

没有看到你的代码，这是我能做到的最好的。

尝试使用 formControl。

html;

<input matInput [formControl]='myControl'>

在你的 ts 中，将其声明为类变量：

myControl = new FormControl();

然后像这样通过管道传输更改（可以进入ngOnInit）：

this.myControl.valueChanges.pipe(
   debounceTime(500),
   switchMap(changedValue => this.productService.search_Products(changedValue)),
).subscribe(productList => this.product_list = productList);

【讨论】：