![](/img/trans.png)
[英]How to get selected value of nested object array using ngFor in Angular?
[英]Angular5: Convert nested object to nested array for using in ngFor
我有一個這樣的嵌套對象:
data = [
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
},
{
"id": "0002",
"type": "donut",
"name": "Raised",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
},
{
"id": "0003",
"type": "donut",
"name": "Old Fashioned",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
}
]
我想遍歷此對象並使用*ngFor
在html中顯示batter
對象數據,但是當我嵌套*ngFor
來實現如下效果時:
<div *ngFor="let item of data">
<!--Display first level elements here-->
<div *ngFor="let batter of item.batters">
<!--Display secondlevel elements here-->
</div>
</div>
我收到以下錯誤提示
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
如何將這個嵌套對象轉換為嵌套數組? 還是有更好的方法使用Typescript / EcmaScript / RxJS來對此對象進行展平?
編輯后:json結構看起來很奇怪。 我想要迭代槽面糊應該是這樣的。
<div *ngFor="let item of data">
<div *ngFor="let i of item.batters.batter">
{{i.id}}, {{i.type}
</div>
</div>
發生這種情況的原因是,您嘗試在循環中而不是數組中循環訪問對象,請看這里:
"batters":{
"batter":
[
{ "id": "1001", "type": "Regular" }
]
},
我相信可以簡化此輸出格式:
"batters":[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Regular" }
]
看起來更好,可以在您的情況下使用。
簡單:
let part = "batters":
{
"batter":
[]}
let extract = part["betters"]["batter"];
mainOrray["betters"] = extract;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.