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

Маленькая мразь · Опубликовано 28.10.2024 17:18:59

Требования: Когда текст меняется, для запроса ключевых слов и возврата данных следует вызывать интерфейс бэк-энда, но часто пользователь не полностью ввёл ключевые слова, и событие изменения текста запускается много раз, что создаёт давление на интерфейс бэкенда, чтобы часто задавать запросы, а также определённое давление на частое рендеринг фронтенда. Как реализовать функцию задержки поиска? То есть, когда пользователь полностью вводит ключевое слово, вызывается запрос к серверному интерфейсу.

Для облегчения презентации вот обстановкаЗадержка на одну секунду, изображения следующие:

HTML-код страницы:

Вход виден.

Код компонента TS следующий:

Вход виден.

(Конец)

Маленькая мразь · Опубликовано 15.05.2025 8:44:41

конвейер debounceTime()
Конвейер debounceTime — это встроенный конвейер в Angular, который можно использовать для отклонения событий. Чтобы использовать конвейер debounceTime, нужно передавать время отскока (в миллисекундах) как параметр
distinctTilUnchanged()
distinctUntilChanged — это оператор, который фильтрует те же значения, которые последовательно срабатывают в наблюдаемой системе. Это полезно в ситуациях, когда вы хотите предотвратить повторение одного и того же значения Наблюдаемым несколько раз подряд.

Маленькая мразь · Опубликовано 15.05.2025 9:29:33

AsyncValidatorFn проверяет стабилизацию задержки

Вход виден.

Ссылка:Вход по гиперссылке виден.

Маленькая мразь · Опубликовано 15.05.2025 9:33:52

Маленькая шляка Опубликовано 2025-5-15 09:29
AsyncValidatorFn проверяет стабилизацию задержки

Ссылка: https://stackoverflow.com/questions/36919011/how-to-add-debounc ...

Дальнейшая инкапсуляция (Не тестировали）

Пример 1:

Вход виден.

Пример 2:

Вход виден.

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

Связанные публикации

Просмотренные разделы