如何使用angular中的typescript获取json中特定嵌套节点的计数?
我需要从JSON中获取特定嵌套节点的计数。我试图找出它,但无法得到具体的结果,因为它显示了所有适用的总计数,而不是所有行下的特定嵌套节点计数 需要您的专业知识来纠正代码以达到预期的结果 电流输出:如何使用angular中的typescript获取json中特定嵌套节点的计数?,json,angular,typescript,Json,Angular,Typescript,我需要从JSON中获取特定嵌套节点的计数。我试图找出它,但无法得到具体的结果,因为它显示了所有适用的总计数,而不是所有行下的特定嵌套节点计数 需要您的专业知识来纠正代码以达到预期的结果 电流输出: Applicable as 3, Not Applicable as 2 预期产出: 我正在显示父行,并在每行上单击函数以显示详细信息/整个数据。所以,对于第一行的细节,我想 适用:2,不适用:1 第二行单击 适用:1,不适用:1 单击第一行 点击第二行 显示总计数。相反,它应该只为第一个显示2
Applicable as 3, Not Applicable as 2
预期产出:
我正在显示父行,并在每行上单击函数以显示详细信息/整个数据。所以,对于第一行的细节,我想
适用:2,不适用:1
第二行单击
适用:1,不适用:1
单击第一行
点击第二行
显示总计数。相反,它应该只为第一个显示2n1,为第二个显示1n1
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>
你可以这样做
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
查询它(我假设它是唯一的)
您可以使用组件中的函数帮助实现所需的行为 组件1.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>
适用:{{getCount(userObj.assigned_to,'applicative')}
不适用:{{getCount(userObj.assigned_to,'不适用')}
仅供参考:{{getCount(userObj.assigned_to'FYI')}
下面是一个例子
有更可靠的方法可以做到这一点,比如创建一个,这可以使代码更加优雅,但是这种方法也很好,因为不存在代码重复,并且它以一种清晰、明确的方式按预期工作。这并不能回答这个问题。一旦你有足够的钱,你将能够;相反虽然这段代码可以解决这个问题,但如何以及为什么解决这个问题将真正有助于提高您的帖子质量,并可能导致更多的投票。请记住,你是在将来回答读者的问题,而不仅仅是现在提问的人。请在回答中添加解释,并说明适用的限制和假设。为了更好地理解
getApplicatableCounts(){this.impactCount={applicative:0,notapplicatable:0,fyi:0}this.allUser.forEach(row=>{row.assigned_to.forEach(sub=>{if(sub.sub_impact=='applicative'){this.impactCount.applicative++}如果(sub.sub_impact==='不适用'){this.impactCount.notapplicatable++;}否则如果(sub.sub_impact==='FYI'){this.impactCount.FYI++;});}
当我使用此函数进行更新时,它不会向我显示结果。请查看它并建议我更改更新以更好地理解我需要获取该父节点的仅计数节点,但目前它为所有节点提供了计数。我是否也可以将相同的值分配给{{getCount(userObj.assigned_to,'applicative')}“
要获得li的宽度,因为我正试图在上面的折线图中显示它,所以,我将得到宽度乘以10和%yes,某种程度上,您需要删除插值{},并且只将表达式保留在-{getCount(userObj.assigned_to,'applicative')}}“
。类似于:[style.width.%]=”getCount(userObj.assigned_to,'applicative')*10“
您能为我推荐解决方案吗?
let indexPos = this.offset;
forEach(this.data, (data, index) => {
indexPos += 1;
data.sno = indexPos;
});
this.totalRecord = data.sno;
getCount(members, filterValue) {
return members.filter(a => a.sub_impact === filterValue).length;
}
<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>