我在 Angular 8 中渲染參數(shù)時(shí)遇到問題，我從 API 獲取數(shù)據(jù)，需要在與這些數(shù)據(jù)匹配的 div 中渲染這些數(shù)據(jù)，但我遇到了數(shù)據(jù)在每個(gè)div 中顯示的問題，如下所示：這里，“Drops”、“Misc”、“Network”是需要渲染較低類別的主要div。盡管如此，我想要的是，例如，在主“ Drops”中只有“Drops Aluminium”，在“Misc”中只有“VANNE”，在“Network”中只有“Main”。較低類別僅當(dāng)其 id 位于主id 內(nèi)時(shí)才應(yīng)呈現(xiàn)（參見下圖 2）。我嘗試過的：綁定 div 內(nèi)的值，因?yàn)樗兄黝悇e和較低類別都有如下 id：這是一個(gè) stackblitz 示例：https://stackblitz.com/edit/angular-me2ppb ?file=src%2Fapp%2Fapp.component.ts預(yù)先感謝您的時(shí)間和幫助，非常感謝！
2 回答
繁星淼淼
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊
如果我理解正確的話，你能用模板中的嵌套循環(huán)來解決它嗎？
<div *ngFor="let main of total_by_level | keyvalue">
{{label_name[main.key]}}
<div *ngFor="let sub of main.value | keyvalue">
{{label_name[sub.key]}}
</div>
</div>
這將導(dǎo)致：
Network
Main
Drops
Drops Aluminium
Misc
VANNE
斯蒂芬大帝
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
您在這里有 2 個(gè)選擇：
調(diào)整您的 HTML 以適當(dāng)?shù)匮h(huán)
total_by_level和查詢label_name在代碼中構(gòu)建輸出
看起來您兩種都嘗試過，因此對(duì)其中任何一種都持開放態(tài)度。就我個(gè)人而言，我更喜歡在代碼中做盡可能多的事情，并讓 HTML 盡可能簡(jiǎn)單，所以我會(huì)采用方法 2。
在ngOnInit()（這應(yīng)該是您進(jìn)行任何初始處理的地方），我將根據(jù) 上的結(jié)構(gòu)構(gòu)建一個(gè)數(shù)組total_by_level。
output: any[];
ngOnInit() {
this.output = Object.keys(this.total_by_level).map(levelKey => {
const child = this.total_by_level[levelKey];
return {
level: {
label: this.label_name[levelKey]
},
children: Object.keys(child).map(childKey => ({
label: this.label_name[childKey],
value: child[childKey]
}))
};
});
}
然后在 HTML 中綁定到這個(gè)數(shù)組就變得很簡(jiǎn)單：
<div *ngFor="let item of output">
{{item.level.label}}
<div *ngFor="let child of item.children">
{{child.label}}
{{child.value}}
</div>
</div>
您正在處理一些奇怪的數(shù)據(jù)結(jié)構(gòu)，我不確定您的術(shù)語，所以我在這里猜測(cè)了一些。您可以采用這個(gè)想法的概念并使用它。我還假設(shè) 中只有 1 個(gè)嵌套子級(jí)total_by_level。
演示： https: //stackblitz.com/edit/angular-upqdex
- 2 回答
- 0 關(guān)注
- 196 瀏覽
添加回答
舉報(bào)
0/150
提交
取消