Angular 9 如何使用 debouncetime 处理输入变化事件 (keyup)

Question

如何使用去抖时间在 API 中搜索按键输入更改事件的数据。看看下面的代码。它不工作。每次输入更改时都会向 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。

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

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

尝试使用 formControl。

html;

<input matInput [formControl]='myControl'>

在您的 ts 中，将其声明为 class 变量：

myControl = new FormControl();

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

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

Angular 9 如何使用 debouncetime 处理输入变化事件 (keyup)

Angular 9 how to use debouncetime for input change event (keyup)

javascript

rxjs

angular

angular9