Ionic-带有父母和孩子元素的HTML列表

Question

我在array中有数据，其中每个元素代表父对象，每个父对象都有items数组，其元素是子元素。我必须在每个父母下生成HTML父母列表+嵌套子列表。每个子元素都是可单击的（导航到另一个页面）。像图像上的东西。这里有什么帮助吗？我可以使用* ngFor来迭代一级元素（父级），并使用ion-list和ion-item，但是如何嵌套子级？

Answer 1

您基本上可以嵌套*ngFor。

示例数据：

var categories = [
    {
        "name": "Category 1",
        "items": [
            "item1"
            "item2"
        ]
    }
];

示例模板：

<div *ngFor="let category of categories">
    <h2>{{category.name}}</h2>
    <ion-list>
        <ion-item *ngFor="let item of category.items">{{item}}</ion-item>
    </ion-list>
</div>

在顶层，您可以迭代类别，对于每个类别，您可以迭代其项目。