Angular, не обновляет таблицу, как отфильтровать по нажатию input[checkbox]?

Question

[TReactor]

Подскажите пожалуйста как реализовать фильтрацию по выбранным checkbox'ам?
Не могу разобраться почему не корректно работает, т.е. только при инициализации фильтруется... при нажатии значение меняется у объекта для фильтрации... но не обновляет таблицу. Вот проект на StackBlitz

Таблицу строю из полученных данных с json...

Опции должны быть на основании данных. Т.е. в фильтре gender, например, две опции: female и male. В поле departament - все возможные департаменты.

Опции представляют собой сheckbox [Значение Фильтра]

Например, при нажатии на checkbox таблица должна фильтроваться по соответствующему значению, при этом, все остальные фильтры должны пересчитаться.

Answer 1

[0xD34F]

при нажатии значение меняется у объекта для фильтрации... но не обновляет таблицу

Как сказано в документации по поводу pure пайпов:

Angular ignores changes within (composite) objects.

Наверное, пайп FilterdataPipe стоит сделать impure.

Кроме того, сама фильтрация - даже не знаю, что и сказать, настолько бредово устроена.

Ну и ещё у вас имя одного из свойств - department, а соответствующий фильтр называется departament (откуда-то вылезла a после первой t). И с city тоже непонятно - свойство вложенное, не знаете, что делать, поэтому даже и не начали реализовывать соответствующий фильтр?

Насколько я понял, вам нужно что-то вроде этого, да?

Comments

[TReactor]

Да что-то вроде этого, спасибо, departament, здесь ошибку допустил. Только знакомлюсь с ангуляром, спасибо за помощь

[TReactor]

Еще вопрос, а если установить всем selected false и уже при выбранной опции(на true) по ней фильтровать, как правильно изменить pipe? Вот попробовал если в filterdata изменяю на !f.selected и в условии еще на !== , но некорректно работает(например, если в одной группе выбрать несколько опций)

[0xD34F]

TReactor, ничего не надо менять в пайпе, верните всё как было.

Если результат получается не тот, что вам нужен - уточните вопрос.

[TReactor]

0xD34F, то что вы сделали, там сейчас все checkbox'ы включены, т.е. selected в true, нужно в false, чтобы все checkbox'ы были не выбраны... а при нажатии(selected в true) фильтруется именно по этому значению. Например: при нажатии на фильтр 'gender' - 'male' в таблице отфильтровываются все мужчины и т.д.

[0xD34F]

TReactor, сейчас для того, чтобы строка оказалась отобрана, необходимы совпадения по всем группам фильтров. А вам, если я правильно понял, нужно чтобы отбор происходил при любом совпадении - замените в пайпе fk.every на fk.some.

[TReactor]

0xD34F, Спасибо за помощь

[TReactor]

0xD34F, подскажите пожалуйста можно как то "зафиксировать" локальную переменную в цикле, где мы делаем инициализацию checkbox'ов в шаблоне где цикл *ngFor="let filter of filters[f]", чтоб выводило после каждого checkbox'а кол-во оставшихся строк в таблице подпадающих под этот фильтр, например такой реализацией

<span *ngIf="arrUsers | filterdata: filters: f as count">({{count.length}})</span>

, но count перезаписывается и выводит одно и тоже для каждой опции в этой группе?

[0xD34F]

TReactor, я бы под эту задачу сделал отдельный пайп, как-то так.

[TReactor]

0xD34F, нет, я имею ввиду, например, изначально у всех пустое значение, если checkbox выбрали, то после него выводится количество оставшихся строк по этому фильтру, следующий фильтр выбрали, также после чекбокса вывелось количество еще оставшихся строк подпадающих под этот фильтр и т.д. только чтоб у предыдущих фильтров не менялось количество, а было зафиксировано сколько попадало при фильтрации?Например: в таблице изначально 10 строк, у чекбоксов тоже изначально у всех (_) пустое значение, мы выбрали фильтр male, таблица отфильтровалась и уже осталось 5 строк в таблице, количество у чекбокса стало 5, дальше выбрали фильтр департамент back, в табл. уже стало 3 строки и количество у чекбокса стало 3 и т.д.

[0xD34F]

TReactor, извините, не могу угнаться за вашими мыслями. Лучше сделайте отдельный вопрос, где подробно будет разъяснено, что вам нужно - желательно с примерами и без малопонятных словосочетаний вроде "количество оставшихся строк по фильтру".