如何使用 Angular 中的 typescript 获取 json 中特定嵌套节点的计数？

Question

我需要从 JSON 中获取特定嵌套节点的数量。我试图弄清楚但无法获得具体结果，因为它向我显示了所有行下所有 Applicable、Not Applicable 的总数，而不是特定的嵌套节点数。

需要您的专业知识来纠正代码以达到预期的结果。

电流输出：

Applicable as 3, Not Applicable as 2

预期输出： 我正在显示父行和每行上的单击功能以显示详细信息/整个数据。所以，对于第一行的细节，我想要 适用：2，不适用：1 第二行点击 适用：1，不适用：1

点击第一行 点击第二行

两者都显示总计数。相反，它应该只显示第 1 个 2 n 1 和第 2 个 1 n 1。

app.component.ts

getApplicableCounts() {
    this.impactCount = {applicable:0, notapplicable:0, fyi: 0}
    this.allUser.forEach(row => {
      row.assigned_to.forEach(sub => {
        if (sub.sub_impact === 'Applicable') {
          this.impactCount.applicable++;
        } else if (sub.sub_impact === 'Not Applicable') {
           this.impactCount.notapplicable++;
        } else if (sub.sub_impact === 'FYI') {
          this.impactCount.fyi++;
        }
      });
    });
  }

app.component.html

<ul class="">
<li class="">{{impactCount.applicable}}</li>
<li class="">{{impactCount.notapplicable}}</li>
<li class="">{{impactCount.fyi}}</li>
</ul>

数据.json

{
  "users": [
    {
      "id": 1,
      "first_name": "Male",
      "last_name": "Record",
      "email": "male.record@gmail.com",
      "gender": "Male",
      "dob": "01-01-1987",
      "impact": "Not Applicable",
      "score": "Updated",
      "checked": false,
      "assigned_to": [
        {
          "co_score": 54,
          "dl": "CAT1",
          "sub_impact": "Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        },
        {
          "co_score": 20,
          "dl": "CAT2",
          "sub_impact": "Not Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        },
        {
          "co_score": 99,
          "dl": "CAT1",
          "sub_impact": "Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        }
      ]
    },
    {
      "id": 2,
      "first_name": "Female",
      "last_name": "Record",
      "email": "female.record@gmail.com",
      "gender": "Female",
      "dob": "31-12-1987",
      "impact": "Not Applicable",
      "checked": false,
      "score": "Updated",
      "assigned_to": [
        {
          "co_score": 54,
          "dl": "CAT1",
          "sub_impact": "Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        },
        {
          "co_score": 20,
          "dl": "CAT2",
          "sub_impact": "Not Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        }
      ]
    }
  ]
}

Answer 1

您可以使用组件中的某个函数的帮助来实现所需的行为，

component.ts:

getCount(members, filterValue) {
  return members.filter(a => a.sub_impact === filterValue).length;
}

html 如下所示：

<li>Applicable: {{ getCount(userObj.assigned_to, 'Applicable') }}</li>
<li>Not Applicable: {{ getCount(userObj.assigned_to, 'Not Applicable') }}</li>
<li>FYI: {{ getCount(userObj.assigned_to, 'FYI') }}</li>

这里有一个stackblitz 的例子

有更健壮的方法可以做到这一点，例如创建pipe，这可以使代码更优雅，但这种方法也很好，因为不存在代码重复并且它以清晰、明确的方式按预期工作.

Answer 2

你可以这样做，

function getApplicableCounts() {
    return this.allUser.reduce((acc, curr) => {
        acc[curr.id] = curr.assigned_to.reduce((subAcc, subCurr) => {
            if (subCurr.sub_impact === 'Applicable') {
                subAcc.applicable++;
            } else if (subCurr.sub_impact === 'Not Applicable') {
                subAcc.notapplicable++;
            } else if (subCurr.sub_impact === 'FYI') {
                subAcc.fyi++;
            }
            return subAcc;
        }, {applicable:0, notapplicable:0, fyi: 0})
        return acc;
    }, {});
}

这应该会产生以下结果，

{
  '1': { applicable: 2, notapplicable: 1, fyi: 0 },
  '2': { applicable: 1, notapplicable: 1, fyi: 0 }
}

你可以通过id查询它（我假设它是唯一的）

this.getApplicableCounts()[1]; // { applicable: 1, notapplicable: 1, fyi: 0 }

Answer 3

let indexPos = this.offset;
forEach(this.data, (data, index) => {
  indexPos += 1;
  data.sno = indexPos;
});

this.totalRecord = data.sno;