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

我有一个对象列表，我想使用flexbox和*ngFor根据父子关系显示这些对象

如何循环人员，并在每个国家行下方的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>

我想让其他行显示每个国家行下的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>

{{c.country}

{{people.name}
{{people.age}}



{{c.language}}
{{c.product}}

这里是stackbiz链接

---

我找到了解决方案，但这看起来也很酷。谢谢您好，请问您知道如何折叠/隐藏每个国家/地区行，一次一行吗？您可以使用变量并在单击时切换该变量。您可以为您创建的演示添加一个示例吗，谢谢？您只需要修改切换功能。在这里，如果它有助于做评论和回答

<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>