К сожалению, я думаю, что мы разработали сетку данных для выдачи изменений при каждом изменении значения фильтра с устранением неполадок, предназначенных для выполнения на стороне приложения, как потребители считают нужным.
Тем не менее, можно достичь sh что вы описываете. Я реализовал быструю и грязную охрану, основанную на событиях, но могут быть и лучшие способы. Я добавлю здесь фрагменты кода и ссылку на рабочий стек в конце.
Вы находитесь на правильном пути с установщиком. Но нам не нужно отказываться от времени, нам нужно только «отказываться» от определенных событий.
Вместо того, чтобы отказываться от времени, что, если мы откажемся с @HostListener для кликов на входе фильтра? (Я оставлю это в качестве упражнения для вас, чтобы реализовать HostListener для события focusin, так как фокусировка пузыря вверх и размытия не происходит). Для этого нам нужно:
- Hostlistener, который может слышать событие keydown.enter на входе фильтра
- Защита для предотвращения запросов
- Свойство для хранения Состояние сетки данных при вводе пользователем текста
В общем случае код должен:
- Извлекать данные, когда компоненты компонента, но не после, если не указано
- Отслеживать события состояния, которые отправляются из сетки данных
- прослушивание событий keydown.enter (и любых других событий, таких как фокусировка входного сигнала фильтра - поскольку он пузырится, в отличие от размытия)
- Убедитесь, что событие было сгенерированный на входе фильтра данных
- сбросить охрану
- сделать запрос
- повторно включить охрану
Вот грубая попытка делает это:
export class DatagridFullDemo {
refreshGuard = true; // init to true to get first run data
debouncer = new Subject<any>(); // this is now an enter key debouncer
datagridState: ClrDatagridStateInterface; // a place to store datagrid state as it is emitted
ngOnInit() {
// subscribe to the debouncer and pass the state to the doRefresh function
this.debouncer.asObservable().subscribe(state => {
this.doRefresh(state);
});
}
// a private function that takes a datagrid state
private doRefresh(state: ClrDatagridStateInterface) {
// Guard against refreshes ad only run them when true
if (this.refreshGuard) {
this.loading = true;
const filters: { [prop: string]: any[] } = {};
console.log("refresh called");
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;
this.selectedUser = this.users[1];
// Set the guard back to false to prevent requests
this.refreshGuard = false;
});
}
}
// Listen to keydown.enter events
@HostListener("document:keydown.enter", ["$event"]) enterKeydownHandler(
event: KeyboardEvent
) {
// Use a host listener that checks the event element parent to make sure its a datagrid filter
const eventSource: HTMLElement = event.srcElement as HTMLElement;
const parentElement = eventSource.parentElement as HTMLElement;
if (parentElement.classList.contains("datagrid-filter")) {
// tell our guard its ok to refresh
this.refreshGuard = true;
// pass the latest state to the debouncer to make the request
this.debouncer.next(this.datagridState);
}
}
refresh(state: ClrDatagridStateInterface) {
this.datagridState = state;
this.debouncer.next(state);
}
}
Вот рабочий стек стека: https://stackblitz.com/edit/so-60980488