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>

在顶层您迭代您的类别，对于每个单独的类别，您迭代其items。