Question

我正在用角度形式控件的可观察对象过滤对象数组的可观察对象。

这工作正常，但我现在想在数组中的每个对象上切换一个属性，以在列表中展开或折叠它，这就是我遇到的问题。

我想到了两个选择：

选项1 使用BehaviorSubject，这样我可以访问当前值，然后可以在单击按钮并切换属性时遍历列表

选项2 我正在使用CombineLatest进行过滤，所以我可以添加按钮单击的可观察对象（以便我组合三个可观察对象）并以某种方式切换那里的属性吗？

无论哪种方式，我都不知道该怎么做。

这是我尝试实现的一个简单的stackblitz示例。因此，我想连接“切换所有列表”按钮，以便在数组中的所有对象上切换“ expanded”属性

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

编辑：

我设法使其与BehaviorSubject一起使用。在此处查看新的stackblitz：

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

我想实现的最后一件事就是也过滤列表中的任务。我已经在stackblitz中尝试过（当前已注释掉），但是我认为我的方法是可变的，因此当删除过滤器输入时，仍对任务进行过滤吗？我该如何解决它，以便在删除过滤器输入时，任务再次被取消过滤并因此显示出来？

编辑2：

我已经设法使其正常工作，但是最好有人请我检查一下我的工作，看看是否有更简单的方法可以做到。做看起来很简单的事情似乎很费劲。.

我的要求是：

任务必须分组并在实体下列出（实体可以没有任务，但实体仍应显示）
当用户输入过滤器时，任务和实体均应过滤（如果实体包含与过滤器匹配的任务，则仍应显示）
切换按钮应切换所有实体的展开状态

我发现分组和过滤非常简单，但是切换很困难。我可以将其添加到CombineLatest中，但是当所有需要的是切换每个元素的属性时，我将进行分组和过滤。

这是我的闪电战：

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

Answer 1

有点hacky，但是您可以这样：

<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 + async管道声明为另一个模板var“ filteredArray”。现在在主div内，您有了数组。

然后，您将主div内的全部切换按钮移动到，并使用ngIf防止其自身重复N次，仅允许其存在于列表顶部。

现在在ts中添加方法：

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

根据您的UX，您可能需要定义新属性来跟踪扩展或不扩展，因为上面的代码只是切换了任何状态列表。

这是堆叠闪电战：

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

可观察-过滤和切换属性（角度）

1 个答案: