[英]How to display grouped data using flexbox and *ngFor
I have a list of objects that I want to display based on parent-child relation using flexbox with *ngFor.我有一个对象列表,我想使用带有 *ngFor 的 flexbox 基于父子关系显示这些对象。
How can I loop the people and display each person in a flexbox div below each countries row?如何循环人员并在每个国家/地区行下方的 flexbox div 中显示每个人?
Here is the flexbox example code:这是 flexbox 示例代码:
.html .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 .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"
}
]
}
];
I want to have other rows showing poeples data under each country rows.我想让其他行在每个国家/地区行下显示 poeples 数据。
Here is an example but using ul and li :example这是一个示例,但使用ul 和 li :示例
You can write another ngFor loop inside the ngFor loop您可以在 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>
Here is stackbiz link https://stackblitz.com/edit/angular-ivy-5rzav1?file=src%2Fapp%2Fapp.component.html这是 stackbiz 链接https://stackblitz.com/edit/angular-ivy-5rzav1?file=src%2Fapp%2Fapp.component.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.