Angular - ясность отладки vm-ware datagrid clrDgRefresh

Мне нужен способ отразить событие, генерируемое сеткой данных ясности, чтобы я извлекал данные из серверной части только после того, как пользователь закончил вводить текст. Я использую сетку в приложении angular 6 и привязываю событие к моей функции. Моя установка выглядит следующим образом:

<clr-datagrid (clrDgRefresh)="fetchData($event)"></clr-datagrid>

fetchData(state) {
  // Fetch data from back end
}

Как отразить событие, чтобы оно не запускало мою функцию fetchData при каждом нажатии клавиш? У меня нет дескриптора ни одного из входов фильтра datagrids, и я не знаю, сколько входов там будет. Все, что у меня есть, - это событие, которое запускается при нажатии клавиши на любом из входов фильтра сетки.


angular vmware-clarity
person Jimmy Fencer    schedule 12.03.2019    source источник
comment
Возможный дубликат Angular и debounce   -  person Igor    schedule 13.03.2019
comment
не дубликат вышеупомянутого   -  person Jimmy Fencer    schedule 13.03.2019

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете отразить события на стороне приложения с помощью оператора rxjs debounceTime

Настройте тему, которая действует как поток состояний таблицы данных

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, поэтому очевидно, что его также можно ввести для интерфейса состояния datagrid или улучшить другими способами (например, добавить больше операторов rxjs для обработки других вариантов использования). Кроме того, это должно дать вам представление о том, как это приложение может отразить события datagrid.

Вот рабочий POC на stackblitz.

person hippeelee    schedule 13.03.2019
comment
Спасибо за это решение. Очень признателен - person Jimmy Fencer; 18.03.2019
comment
Ссылка на Stackblitz не работает. Не могли бы вы обновить его? - person shravan; 22.05.2021