Активированный фильтр в сетке данных не обновляется при изменении данных

У меня проблема с повторной фильтрацией, если данные изменились.

См. Этот stackblitz: https://stackblitz.com/edit/clarity-light-theme-v11-oosuvk

Колонка предварительно отфильтрована с помощью «AA». Если вы выбрали строку, измените значение на «BB», строка останется в сетке данных, поэтому фильтр не был «обновлен».

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


angular vmware-clarity
person RagnarLodbrok    schedule 24.07.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

В .html:

<clr-dg-column [clrDgField]="'name' [(clrFilterValue)]="filterValue">Name</clr-dg-column>
[...]
<input #input value="{{selectedItem.name}}">
<button (click)="onSave(input.value)">Save</button>

В .ts:

public filterValue = 'AA';
onSave(value) {
    this.selectedItem.name = value;
    let tmp = this.filterValue;
    this.filterValue = this.filterValue + ' ';
    setTimeout(
      () => {
          this.filterValue = tmp;
      }, 0
    )
  }
}

Однако использование setTimeout() - это не то, что я предпочитаю ... Надеюсь, это помогло.

person Augustin R    schedule 24.07.2018
comment
Спасибо за ответ, но это похоже на очень хакерский обходной путь. Я уверен, что я не единственный, у кого есть этот вариант использования, и я уверен, что для этого есть реализация из ясности ...? :) - person RagnarLodbrok; 24.07.2018
comment
Да, я знаю, что это решение немного сложно ... Я просмотрел документы для ясности, но не нашел никаких данных, которые можно было бы использовать для принудительной фильтрации, поэтому я решил использовать обновление привязки данных для обновления фильтра. Надеюсь, вы найдете хороший способ сделать это :) - person Augustin R; 24.07.2018

arrow_upward
0
arrow_downward

Самый быстрый способ сделать это без взлома - вызвать общедоступный метод dataChanged() в сетке данных для обновления отображаемых элементов из-за изменения данных, о которых сетка данных не знает: https://stackblitz.com/edit/datagrid-edit-refresh?file=app%2Fapp.component.html

Однако я настоятельно рекомендую работать с неизменяемыми объектами при их отображении в Datagrid. Причина в том, что из-за очевидных проблем с производительностью сетка данных не может выполнять глубокое сравнение объектов для каждого элемента во время каждого цикла обнаружения изменений. Он проверяет, были ли элементы добавлены или удалены из общего списка элементов, но не будет проверять, изменились ли их свойства. Это точно такое же поведение, что и *ngFor, и считается стандартным почти для всех структурных директив. В вашем случае это будет означать, что логика редактирования изменится с

selectedItem.name = name

to:

new Item = {...selectedItem, name};
items.splice(selectedItemIndex, 1, newItem);

Если бы вы сделали это, вам не нужно было бы принудительно обновлять сетку данных вручную.

person Eudes    schedule 24.07.2018