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

在顶层，您迭代您的类别，并且对于每个单独的类别，您迭代其项目。