Question

我正在研究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"
        }
      ]
    }
  ]

我当前正在向父级发送复选框click事件，我需要父级然后根据选定的复选框值过滤对象。

我一次只设法做到这一点，但事实证明，多次尝试很困难。

类似的东西：

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

任何了解我需要做些什么的事情都是很棒的。

Answer 1

您在管理数据的方式上遇到了麻烦。

查看此working stackblitz

Answer 2

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

(ngModelChange)="onChange($event)“

在组件中：

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

此操作将把您的父组件的更改输出。在这里，您可以读取数组，并可以对数据进行任何处理。从现在开始，我认为您可以自己进行管理。

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

2 个答案: