Angular — устранение неполадок vm-ware datagrid clrDgRefresh
Мне нужен способ отменить событие, созданное сеткой данных Clearness, чтобы я извлекал данные из серверной части только после того, как пользователь закончил печатать. Я использую сетку в приложении angular 6 и привязываю событие к своей функции. Моя установка выглядит следующим образом,
<clr-datagrid (clrDgRefresh) = "fetchData($event)"></clr-datagrid>
fetchData(state) {
// Fetch data from back end
}
Как отменить событие, чтобы оно не запускало мою функцию fetchData при каждом нажатии клавиши? У меня нет дескриптора ни одного из входных данных фильтра данных, и я не знаю, сколько входных данных будет. Все, что у меня есть, это событие, которое запускается, когда на любом из входов фильтра сетки есть клавиша.
не дубликат выше
Ответы 1
Вы можете отменить дребезг событий на стороне приложения с помощью оператора rxjs debounceTime
- Документы: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime
- Примеры: https://www.learnrxjs.io/operators/filtering/debouncetime.html
Настройте тему, которая действует как поток состояний сетки данных.
debouncer = new Subject<any>();
Передайте состояния дебаунсеру:
refresh(state: ClrDatagridStateInterface) {
this.debouncer.next(state);
}
Подпишитесь на дебаунсер и используйте debouceTime
this.debouncer.asObservable().pipe(
debounceTime(2000)
).subscribe(state => {
this.loading = true;
const filters: { [prop: string]: any[] } = {};
if (state.filters) {
for (const filter of state.filters) {
const { property, value } = <{ property: string; value: string }>filter;
filters[property] = [value];
}
}
this.inventory
.filter(filters)
.sort(<{ by: string; reverse: boolean }>state.sort)
.fetch(state.page.from, state.page.size)
.then((result: FetchResult) => {
this.users = result.users;
this.total = result.length;
this.loading = false;
});
})
Это быстрый POC, поэтому, очевидно, его также можно напечатать для интерфейса состояния сетки данных или улучшить другими способами (например, добавить больше операторов rxjs для обработки других вариантов использования). Кроме того, это должно дать вам представление о том, как это приложение может нейтрализовать события сетки данных.
Вот рабочий POC на стекблиц.
Спасибо за это решение. Очень признателен
Ссылка на Stackblitz не работает. Не могли бы вы обновить его?
Возможный дубликат Угловой и устранение дребезга