如何在角度 11 中对父值和子值使用数组过滤器答案

【问题标题】：How to use array filter for both parent and child values in angular 11如何在角度 11 中对父值和子值使用数组过滤器
【发布时间】：2021-08-09 10:38:33
【问题描述】：

我有数组对象，我需要使用一些条件来获取数据。

this.knowledgeData = [
    {
        "id": 3,
        "name": "Education",
        "isOtherCategory": 0,
        "isKnowledgeSkills": false,
        "isMyInterest": false,
        "isParentKnowledgeSkills": true,
        "isParentMyInterest": false,
        "subCategories": [
            {
                "id": 96,
                "categoryId": 3,
                "name": "Careers",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": false,
                "isMyInterest": false
            },
            {
                "id": 97,
                "categoryId": 3,
                "name": "General",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": true,
                "isMyInterest": false
            },
            {
                "id": 92,
                "categoryId": 3,
                "name": "Home Schooling",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": true,
                "isMyInterest": false
            },
        ]
    }
]

已使用过滤器选项找到满足条件的数据..

this.knowledgeData = this.knowledgeData.filter((x)=>{
          if(x.isParentKnowledgeSkills ===true && x?.subCategories?.isKnowledgeSkills ===true){
            return true
          }
        })

它的返回为空...我需要找到只有父子值返回true的数据

结果应该如下所示

this.knowledgeData = [
    {
        "id": 3,
        "name": "Education",
        "isOtherCategory": 0,
        "isKnowledgeSkills": false,
        "isMyInterest": false,
        "isParentKnowledgeSkills": true,
        "isParentMyInterest": false,
        "subCategories": [
            {
                "id": 97,
                "categoryId": 3,
                "name": "General",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": true,
                "isMyInterest": false
            },
            {
                "id": 92,
                "categoryId": 3,
                "name": "Home Schooling",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": true,
                "isMyInterest": false
            },
        ]
    }
]

这意味着输出应该返回子数组 subCategories 中 isKnowledgeSkills 为 true 的对象

【问题讨论】：

属性isKnowledgeSkills 在x.subCategories 上不存在，因为x.subCategories 是一个数组。它是该数组元素的属性，而不是数组本身。话虽如此，目前尚不清楚您所追求的过滤条件 - 如果存在 isKnowledgeSkills === true 的子类别，或者是否所有子类别都必须具有 isKnowledgeSkills === true 或其他一些条件
在问题中添加所需的输出将有助于理解它。
在上面这个数组对象中，我需要获取 isKnowledgeSkills 为 true 的数据
我需要为父对象和子对象应用过滤器选项
也添加了示例结果

标签： angular typescript

【解决方案1】：

我会选择以下内容：

const filtered = knowledgeData.filter(p => p.isParentKnowledgeSkills)
    .map(p => ({
        ...p,
        subCategories: p.subCategories.filter(s => s.isKnowledgeSkills)
    }));

首先使用 isParentKnowledgeSkills 过滤掉父数据
其次，过滤掉子数据

Playground link

【讨论】：

【解决方案2】：

我找到了答案……

this.knowledgeData = this.knowledgeData.map((i)=>{
          i.subCategories = i.subCategories.filter((x)=> x.isKnowledgeSkills === true)
          return i;
        })

【讨论】：

【解决方案3】：

改变你的 if 条件

if(x.isParentKnowledgeSkills === true 
      && ( x.subCategories.filter((y) => y.isKnowledgeSkills ===true).length )){
            return true
          }

【讨论】：

我需要获取 isKnowledgeSkills 为 true 的数据