Angular 9 как использовать debouncetime для события изменения ввода (keyup) - PullRequest
Новая
       30

Angular 9 как использовать debouncetime для события изменения ввода (keyup)

0 голосов
/ 30 апреля 2020

Как использовать время отката для поиска данных в 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
        }
      })
  }

1 Ответ

1 голос
/ 30 апреля 2020

Элемент управления формы будет отображать изменения в своих значениях в виде наблюдаемой с именем valueChanges. Вам нужно будет использовать оператор pipe, добавив в него valueChanges. Вы не можете просто позвонить debounceTime, как вы делаете выше.

Вы также захотите использовать что-то вроде switchMap, чтобы гарантировать, что любые запросы в полете будут отменены, если пользователь введет что-то во время выполнения запроса.

Не видя ваш код, это лучшее, что я могу сделать на самом деле.

Попробуйте использовать formControl.

html;

<input matInput [formControl]='myControl'>

В вашем ts объявите это как переменную класса:

myControl = new FormControl();

Затем передайте изменения из него следующим образом (можно go в ngOnInit): 

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