0

Пытаюсь реализовать живой поиск на Angular.

Мой HTML:

<input type="text" class="form-control" id="searchBox"
  autocomplete="off" placeholder="Search"
  [(ngModel)]="searchNoteValue"
  (input)="onSearchChange($event.target.value)"
/>

TypeScript:

onSearchChange(searchValue: string): void {
    timer(1000).subscribe(() => {
        this.searchNotes();
    });
}

В данной реализации функция вызывается по кол-ву нажатых клавиш. Пример ввожу в инпут "АВС", проходит секунда -> отправляется 3 запроса с "АВС". Как сделать так, чтобы функция вызывалась один раз?

4
  • 1
    Вам нужен не timer, а debounce. 23 янв 2020 в 14:23
  • @StepanKasyanenko не совсем понимаю как он работает, забагованный какой-то 23 янв 2020 в 15:07
  • 1
    что бы понимать, надо получать знания. Знания можно получить методом тыка, как вы пытаетесь. Иногда, на простых вещах, это работает. Но лучше читать документацию. Читайте доки по debounce и вы все поймете, я верю в вас! 24 янв 2020 в 5:22
  • Данил, ответ @SergeyRogachev является правильным, пометь его пожалуйста галочкой.
    – arturovt
    1 фев 2020 в 8:42

1 ответ 1

1

Это реализация через реактивные формы:

this.searchFormGroup.controls['search'].valueChanges
  .pipe(debounceTime(200), takeUntil(this.ngUnsubscribe))
  .subscribe((val) => {
    /* реализация вашего метода */
  });

Реализация через шаблон:

/** В теле компоненты */
public searchEventEmitter: Subject<string> = new Subject<string>();

ngOnInit() {
    /*
     * Подписываемся на события эмиттера. Как только пройдет 
     * 200 милисекунд с последнего события выполниться код в subscribe 
     */
    this.searchEventEmitter
        .pipe(debounceTime(200), takeUntil(this.ngUnsubscribe))
        .subscribe((val) => {
            /* реализация вашего метода */
        });
}

onSearchChange(searchValue: string): void {
   /** При каждом изменении кидаем событие*/
   searchEventEmitter.next(searchValue);
}
7
  • takeUntil должен быть после debounceTime, иначе он комплитает valueChanges обзервер, при этом debounceTime обзевер остается активным вместе с асинхронным планировщиком.
    – arturovt
    29 янв 2020 в 14:57
  • @overthesanity, а пруфы есть на этот счёт? Почитать, ознакомиться? 30 янв 2020 в 1:55
  • Я только это нашёл: blog.angularindepth.com/… 30 янв 2020 в 3:33
  • Какие пруфы? Это очевидные вещи для тех, кто знает rxjs, что-то из оперы "докажите, что нужно вообще отписываться".
    – arturovt
    30 янв 2020 в 9:00
  • @overthesanity, я не к тому, что не доверяю, а к тому, что бы с этим ознакомиться подробнее. 30 янв 2020 в 9:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.