javascript - Angular 9 how to use debouncetime for input change event (keyup) - Stack Overflow

admin管理员组

文章数量:1277546

How to use debounce time for searching data in API's for keyup input change event. Give a look at the following code. It is not working. A search request to API is made on every input change. I want to make a search request to API using some denounce time.

Thank you in advance

.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
        }
      })
  }

How to use debounce time for searching data in API's for keyup input change event. Give a look at the following code. It is not working. A search request to API is made on every input change. I want to make a search request to API using some denounce time.

Thank you in advance

.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
        }
      })
  }

• javascript
• angular
• rxjs
• angular9

Share Improve this question Follow asked Apr 30, 2020 at 8:10 pratik jaiswalpratik jaiswal 2,07599 gold badges3333 silver badges6666 bronze badges 4

• 1 Have you even tried to search for this? stackoverflow./a/40777621/3375906 – trungvose Commented Apr 30, 2020 at 8:17
• The problem is I am using this inside formArray. So I can't write code in constructor or ngOninit or ngAfterviewinit. And If I use debounce time in keyup event, search operation is occuring for every input change – pratik jaiswal Commented Apr 30, 2020 at 8:25
• Then you show the plete code for the formArray. Otherwise, we won't know what is your difficulty. – trungvose Commented Apr 30, 2020 at 9:18
• it's relationed with this post? stackoverflow./questions/61503425/… – Eliseo Commented Apr 30, 2020 at 9:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

A form control will expose the changes in its values as an observable named valueChanges. You're going to need to use the pipe operator, piping valueChanges into it. You can't just call debounceTime like you are doing above.

You're also going to want to use something like a switchMap to ensure that any in-flight requests are cancelled if a user types something while a request is in progress.

Without seeing your code this is the best I can really do.

Try using a formControl.

html;

<input matInput [formControl]='myControl'>

In your ts, declare this as a class variable:

myControl = new FormControl();

Then pipe the changes from it like this (can go in ngOnInit):

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

本文标签： javascriptAngular 9 how to use debouncetime for input change event (keyup)Stack Overflow