Серія Angular 18 (двадцять шість) реалізує можливості лінивого пошуку на базі RXJS

Маленька покидька · Опубліковано 28.10.2024 17:18:59

Вимоги: Коли текст змінюється, має бути викликаний бекенд-інтерфейс для запиту до ключових слів і повернення даних, але часто користувач не повністю їх ввів, і подія зміни тексту запускається багато разів, що створює тиск на бекенд-інтерфейс щодо частих запитів, а також певний тиск на часте рендеринг фронтенду. Як реалізувати функцію відкладеного пошуку? Тобто, коли користувач повністю вводить ключове слово, викликається запит до бекенд-інтерфейсу.

Для полегшення презентації ось обстановкаЗатримка на одну секунду, зображення виглядають так:

HTML-код сторінки:

Вхід видно.

Код компонента TS виглядає так:

Вхід видно.

(Кінець)

Маленька покидька · Опубліковано 15.05.2025 08:44:41

конвеєр debounceTime()
Конвеєр debounceTime — це вбудований конвеєр у Angular, який можна використовувати для відскасування подій. Щоб використовувати конвеєр debounceTime, потрібно передати час відскоку (у мілісекундах) як параметр
distinctUndateChanged()
distinctUntilChanged — це оператор, який фільтрує ті ж значення, що послідовно виводяться у спостережуванні. Це корисно в ситуаціях, коли ви хочете запобігти тому, щоб Observable кілька разів поспіль вистрілив одним і тим самим значенням.

Маленька покидька · Опубліковано 15.05.2025 09:29:33

AsyncValidatorFn перевіряє стабілізацію затримки

Вхід видно.

Посилання:Вхід за гіперпосиланням видно.

Маленька покидька · Опубліковано 15.05.2025 09:33:52

Little slag Опубліковано 2025-5-15 09:29
AsyncValidatorFn перевіряє стабілізацію затримки

Джерело: https://stackoverflow.com/questions/36919011/how-to-add-debounc ...

Подальша інкапсуляція (Не тестувався）

Приклад 1:

Вхід видно.

Приклад 2:

Вхід видно.

[Кутовий голос] Серія Angular 18 (двадцять шість) реалізує можливості лінивого пошуку на базі RXJS

Пов'язані дописи

Переглянуті розділи