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