Угловой - отменить ясность vm-ware datagrid clrDgRefresh - PullRequest
Новая
       14

Угловой - отменить ясность vm-ware datagrid clrDgRefresh

0 голосов
/ 13 марта 2019

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

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

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

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

1 Ответ

2 голосов
/ 13 марта 2019

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

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

...