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

Question

如何使用去抖时间在 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
        }
      })
  }

Answer 1

表单控件会将其值的更改公开为名为 的可观察对象valueChanges。您将需要使用pipe运算符，通过管道连接valueChanges到其中。你不能debounceTime像上面那样直接打电话。

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

在没有看到你的代码的情况下，这是我真正能做的最好的事情。

尝试使用表单控件。

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);