Angular Typescript - 带有复选框的多过滤器答案

【问题标题】：Angular Typescript - Multi filter with check boxesAngular Typescript - 带有复选框的多过滤器
【发布时间】：2019-05-15 13:43:06
【问题描述】：

我正在开发 Stackblitz，但不幸撞到了墙，现在只能绕圈子！

我希望根据需要包含在特定对象中的多个复选框值来过滤数组，以便将其留在 DOM 中。

这是 Stackblitz - https://stackblitz.com/edit/angular-ycebgh

这是我的数组 json：

cards = [
    {
      name: "Daniel",
      profile: [
        {
          type: "Gender",
          name: "Male"
        },
        {
          type: "Fashion",
          name: "Footwear"
        }
      ]
    },
    {
      name: "John",
      profile: [
        {
          type: "Gender",
          name: "Male"
        },
        {
          type: "Family",
          name: "Children"
        }
      ]
    },
    {
      name: "Sarah",
      profile: [
        {
          type: "Gender",
          name: "Female"
        }
      ]
    },
    {
      name: "Janice",
      profile: [
        {
          type: "Gender",
          name: "Female"
        },
        {
          type: "Family",
          name: "Children"
        }
      ]
    }
  ]

我目前正在向父级发送复选框单击事件，我需要父级然后根据所选复选框值过滤对象。

我已经成功地做到了一次，但有多个被证明是一场斗争。

类似：

onFilter(options) {
    console.log(options);
    this.cards.filter(x => x.profile == options.value );
  }

任何了解我需要做些什么来实现这一点都会很棒。

【问题讨论】：

检查：stackblitz.com/edit/angular-njtabf
我以前也做过类似的事情。如果选中，我可以建议从复选框发出一个值。然后将该值推送到包含您要过滤的所有过滤值的数组。然后您遍历这些过滤值并查看在您的数据中找到哪些值。然后，如果您找到这些项目，则将数据推送到仅包含过滤项目的数组。然后显示该数组。如果您取消选中一个复选框，您将删除从过滤值数组发出的值，您的数据将相应更改。
@Florian 非常感谢。过滤工作正常，但这导致的唯一问题是使用按钮 (A-Z) 的排序现在不起作用。知道如何解决这个问题吗？
@DanielBailey 你有实现这个的代码示例吗？
@DBoi 我更新了 stackblitz。 Daniel Bailey 所描述的就是我所做的

标签： angular typescript filter eventemitter

【解决方案1】：

您在管理数据的方式上遇到了一些问题。

看到这个working stackblitz

【讨论】：

这很棒。非常感谢您的帮助。非常感谢。
感谢您回答了我最初的问题，但您能否指出正确的方向，以确保单击排序按钮 (A-Z) 时，过滤后数组将保持字母顺序？实现这一目标的最简单方法是什么？
您可以设置一个布尔值以了解是否单击了单击的按钮。每当您选中一个框时，如果单击该按钮，则使用您的排序方法对数组进行排序
就像您实现这一目标的方式一样 - 与我的解决方案不同。我现在正在实现多重排序，例如排序 Z-A 和 A-Z。如果你有时间，我很想看看你是如何做到这一点的。非常感谢！ stackblitz.com/edit/angular-b8y8sq
感谢您抽出宝贵时间。教会了我有关枚举的知识，并且非常喜欢您实现的开关盒。还有 takeWhile 运算符 - 以前没见过！非常感谢。

【解决方案2】：

好的，您需要的是变更检测。在这种情况下，您可以使用 ngModelChange。它看起来像：

(ngModelChange)="onChange($event)"

在组件中：

onChange() {
    this.filter.emit(this.options);
  }

这将对您的父组件的更改产生什么影响。在那里你可以读取数组并对数据做任何你想做的事情。从这里开始，我认为您可以自己管理它。

【讨论】：

嗨 Swoox，感谢您的帮助。这主要是我无法弄清楚的事情的过滤方面。如果可能的话，我想使用 filter() 方法，但让它与多个值一起工作。关于如何使用 filter() 并将复选框值与 card.profile.name 值进行比较来实现这一点的任何想法？