如何使用 flexbox 和 *ngFor 显示分组数据

Question

我有一个对象列表，我希望使用带有 *ngFor 的 flexbox 根据父子关系显示。

如何循环 people 并在每个 countries 行下方的 flexbox div 中显示每个人？

这是弹性盒示例代码：

.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"
        }
      ]
    }
  ];

我想让其他行显示每个国家/地区行下的人口数据。

这是一个示例，但使用 ul 和 li：example

Answer 1

您可以在 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