[英]How to display grouped data using flexbox and *ngFor
我有一个对象列表,我想使用带有 *ngFor 的 flexbox 基于父子关系显示这些对象。
如何循环人员并在每个国家/地区行下方的 flexbox div 中显示每个人?
这是 flexbox 示例代码:
.html
<div class="container">
<div class="flex-container">
<div>Country</div>
div>Language</div>
<div>Products</div>
</div>
<div class="flex-data" *ngFor="let c of dataCountry">
<div>{{c.country}}</div>
<div>{{c.language}}</div>
<div>{{c.product}}</div>
</div>
....
</div>
.ts
dataCountry: any[] = [
{
"country": "Singapore",
"language": "language",
"product": "Airlines",
'people': [
{
"name": "Chia Thye Poh",
"age": "60"
},
{
"name": "Joanna Dong",
"age": "50"
},
{
"name": "S Dhanabalan",
"age": "82"
}
]
},
{
"country": "US",
"aanguage": "Eng",
"product": "Cars",
'people': [
{
"name": "Day Meyers",
"age": "70"
},
{
"name": "Aguirre Ellis",
"age": "50"
},
{
"name": "Cook Tyson",
"age": "50"
}
]
}
];
我想让其他行在每个国家/地区行下显示 poeples 数据。
这是一个示例,但使用ul 和 li :示例
您可以在 ngFor 循环内编写另一个 ngFor 循环
<div class="container">
<div class="flex-data" *ngFor="let c of dataCountry">
<ul>
<li>{{c.country}}
<ul *ngFor="let people of c.people">
<li>{{people.name}}</li>
<li>{{people.age}}</li>
</ul>
</li>
</ul>
<div>{{c.language}}</div>
<div>{{c.product}}</div>
</div>
这是 stackbiz 链接https://stackblitz.com/edit/angular-ivy-5rzav1?file=src%2Fapp%2Fapp.component.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.