Observable - свойство фильтра и переключения (angular)

Question

Я фильтрую наблюдаемое из массива объектов с помощью наблюдаемого элемента управления формой в angular.

Это работает нормально, но теперь я хочу переключить свойство для каждого объекта в массив, чтобы развернуть или свернуть его в списке, и именно здесь я застрял ..

Я подумал о двух вариантах:

Вариант 1 Использовать BehaviorSubject, чтобы я мог получить доступ к текущему значению затем я могу перебирать список при нажатии кнопки и переключать свойство

Вариант 2 Я использую combLatest для фильтрации, поэтому могу добавить наблюдаемое нажатие кнопки (поэтому я объединяю три наблюдаемых) и как-то переключить свойства там?

Любой из вариантов, я не совсем уверен, как это сделать ..

Вот простой пример stackblitz с тем, чего я пытаюсь достичь. Поэтому я хочу подключить кнопку «Переключить все списки», чтобы она переключала свойство «расширенный» для всех объектов в массиве

https://stackblitz.com/edit/filter-toggle-observable

Изменить:

Мне удалось заставить его работать с BehaviorSubject. См. Новый stackblitz здесь:

https://stackblitz.com/edit/filter-toggle-observable2

Последнее, чего я хотел бы добиться, - это также фильтровать задачи внутри списков. Я пробовал в stackblitz (в настоящее время закомментирован), но я думаю, что мой метод изменчив, поэтому, когда ввод фильтра удаляется, задачи все еще фильтруются? Как я могу исправить это, чтобы при удалении входного фильтра задачи снова не фильтровались и, следовательно, отображались?

Edit 2:

Мне удалось заставить его работать, но это будет Было бы здорово, если бы кто-нибудь проверил мою работу и посмотрел, есть ли более простой способ сделать это. Казалось довольно запутанным делать то, что казалось довольно простым. будет отображаться)

когда пользователь вводит фильтр, и задачи, и сущности должны быть отфильтрованы (если сущность содержит задачу, которая соответствует фильтру, она все равно должна отображаться) кнопка переключения должна переключать расширенное состояние всех сущностей

Я обнаружил, что группировка и фильтрация довольно просты, но переключение было трудным. Я мог бы добавить его в combLatest, но тогда я бы выполнял группировку и фильтрацию, когда все, что нужно было, - это переключать свойство для каждого элемента ..

Вот мой stackblitz:

https://stackblitz.com/edit/filter-toggle-observable4

Answer 1

Немного хакерский, но вы можете сделать это следующим образом:

<input matInput [formControl]="filter">

<div *ngFor="let list of (filteredLists$ | async) as filteredArray; index as i">
  <button *ngIf="i==0" (click)="toggleAllLists(filteredArray)">Toggle All Lists</button>
  <div class="list">
    <button class="material-icons list-toggle" (click)="toggleListExpand(list)">
      chevron_right
    </button>
    {{list.name}}
    <div *ngFor="let task of list.tasks" class="task"
    [style.max-height.px]="list.expanded ? list.tasks.length*30 : 0">
    {{task.name}}
    </div>
  </div>
</div>

По сути, объявите конвейер Observable + asyn c как другой шаблон var "filterArray". Теперь внутри основного div у вас есть массив.

Затем вы перемещаете кнопку переключения всех внутри основного div и с помощью ngIf предотвращаете его дублирование N раз, позволяя ему существовать только в верхней части списка.

Теперь внутри вашего ts добавьте метод:

toggleAllLists(lists) {
    lists.forEach(list => {
      list.expanded = !list.expanded
    })
  }

Вероятно, вам может потребоваться определить новое свойство для отслеживания расширенного или не зависящего от вашего UX, потому что приведенный выше код просто переключает любые списки состояний дюйм.

Вот stackblitz:

https://stackblitz.com/edit/filter-toggle-observable-6gu3sq