Arrays 如何在Ionic中获取嵌套JSON数组的值？

我是爱奥尼亚的新手，我正在尝试显示嵌套列表。我使用来自服务器的JSON响应来获取所有值。这是我的服务器响应

{
    "addonCategories": [
        {
            "id": 24,
            "name": "Cooking type",
            "parent_id": 0,
            "product_category": 10,
            "selection": "single",
            "type": "other",
            "order": null,
            "shows_selection": true,
            "selection_type": true,
            "direct_pricing": false,
            "is_size": false,
            "addonItems": [
                {
                    "id": 725,
                    "name": "Lightly Done",
                    "product_id": 0,
                    "addon_category_id": 24,
                    "price": 0,
                    "image": "",
                    "attribute": null,
                    "main_category_id": 24,
                    "half_image": null,
                    "full_image": null,
                    "order": null,
                    "large_price": "",
                    "description": null,
                    "default_sauce": 0,
                    "restaurants_id": 0
                },
                {
                    "id": 723,
                    "name": "Regular",
                    "product_id": 0,
                    "addon_category_id": 24,
                    "price": 0,
                    "image": "",
                    "attribute": null,
                    "main_category_id": 24,
                    "half_image": null,
                    "full_image": null,
                    "order": null,
                    "large_price": "",
                    "description": null,
                    "default_sauce": 0,
                    "restaurants_id": 0
                },
                {
                    "id": 724,
                    "name": "Well Done",
                    "product_id": 0,
                    "addon_category_id": 24,
                    "price": 0,
                    "image": "",
                    "attribute": null,
                    "main_category_id": 24,
                    "half_image": null,
                    "full_image": null,
                    "order": null,
                    "large_price": "",
                    "description": null,
                    "default_sauce": 0,
                    "restaurants_id": 0
                }
            ]
        }
    ]
}

我使用下面的HTML代码显示带有复选框选择的嵌套列表

<ion-list class="setting-content">
<ion-list-header *ngFor="let item of (addonDetail | async)?.addonCategories" no-lines>{{item.name}}
          <ion-item-group class="fst-group">
          <ion-item *ngFor="let item1 of item.addonItems" no-lines>
            <ion-label >{{item1.name}}</ion-label>
            <ion-checkbox (click)="clickAddon(item1)" item-right></ion-checkbox>
          </ion-item>
          </ion-item-group>
      </ion-list-header>
</ion-list>

{{item.name}
{{item1.name}

那么如何从内部JSON数组

addonims

中获取

名称
s呢

当我运行代码时，它会从主数组（
addonCategories
）中给出名称，而不是从内部数组（
addonItems
）中给出名称。
问题是HTML模板的结构-简言之，当您有
离子列表头时，它会尝试在
离子标签中呈现该头的文本。因此，嵌套的
离子标签
（在
离子项
中）的存在会破坏模板

相反，根据此处的Ionic文档，您的
离子列表标题不应包含任何子
离子项
元素：

如果改为像这样重新构造HTML模板，它将起作用：

<ion-list class="setting-content">
  <ng-container *ngFor="let item of addonCategories">
    <ion-list-header no-lines>{{item.name}}</ion-list-header>
    <ion-item-group class="fst-group">
      <ion-item *ngFor="let addOn of item.addonItems" no-lines>
        <ion-label>{{addOn.name}}</ion-label>
        <ion-checkbox (click)="clickAddon(addOn)" item-right></ion-checkbox>
      </ion-item>
    </ion-item-group>
  </ng-container>
</ion-list>


{{item.name}
{{addOn.name}

请注意，第3行的
离子列表标题已打开和关闭

由于需要嵌套的
*ngFor
指令-我猜这就是为什么您试图将
离子项
元素嵌入到标题中-我使用了
ng容器
。这样，您仍然可以遍历每个“header”项的嵌套
addonims
数组

在这里工作：
Hi@Stevangelista，它工作起来很有魅力，你的工作榜样是最好的。干得好。