Angular：使用 *ngFor 渲染部分列表数据答案

【问题标题】：Angular: render section list data using *ngForAngular：使用 *ngFor 渲染部分列表数据
【发布时间】：2020-12-26 11:31:49
【问题描述】：

有没有办法使用 *ngFor 在 Angular 中显示部分列表？我发现的所有示例都对单独的部分使用单独的循环。谢谢！

const DATA = [
  {
    title: "Main dishes",
    data: [{name: "Pizza", type: "1"}, {name: "Pizza", type: "5"}]
  },
  {
    title: "Sides",
    data: [{name: "Pizza", type: "2"}]
  },
  {
    title: "Drinks",
    data: [{name: "Pizza", type: "3"}]
  },
  {
    title: "Desserts",
    data: [{name: "Pizza", type: "4"}]
  }
];

预期的用户界面：

【问题讨论】：

关于其他封闭问题中的数组映射问题见jsfiddle.net/om5pz2xf

标签： javascript arrays angular

【解决方案1】：

您可以在模板上使用以下代码：

<div *ngFor="let item of DATA">
    <h3>{{item.title}}</h3>
    <section *ngFor="let inner of item.data" style="background-color: #f558e0; 
                 width: 150px; margin-bottom: 1%;">
        <div>{{inner.name}}</div>
        <div>{{inner.type}}</div>
    </section>
</div>

相应地调整样式。

【讨论】：