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

Question

有什么方法可以使用 *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"}]
  }
];

预期的用户界面：

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

相应地调整 styles。