У меня есть ввод для поиска:
<input type = "text" (ngModelChange) = "projectFilter()">
Когда пользователь вводит текст, он будет вызывать функцию projectFilter после каждого изменения модели.
Как я могу реализовать Debounce с ngxs?
например, отправка действий только через 0,5 секунды после того, как пользователь закончит ввод?
projectFilter() {
this.store.dispatch([
new SomeAction()
);
});
}
Один из способов сделать это - создать наблюдаемую цепочку, используя BehaviorSubject
, который отправляет действие с debounceTime()
.
// somewhere in your component class
projectFilter$ = new BehaviorSubject<string>('')
projectFilter() {
// set next value instead of dispatching
this.projectFilter$.next('current value')
}
ngOnInit() {
// debounce whenever a new value is available with debounce
this.projectFilter$.pipe(
debounceTime(1000),
tap(() => {
this.store.dispatch(new MyAction())
})
).subscribe()
}
Примечание. Код не тестировался. Просто используйте его, чтобы понять концепцию и реализовать ее соответствующим образом.
В качестве альтернативы вы можете использовать реактивные формы. При этом вы получаете такие вещи, как valueChanges
, как наблюдаемое бесплатно.
Надеюсь это поможет.