Question

我是Ionic的新手，我正在尝试显示嵌套列表。我正在使用服务器的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>

那么如何从内部JSON数组name获取addonItems？

当我运行代码时，它会从主数组（addonCategories）中获取名称，但不会从内部数组（addonItems）中获取名称。

Answer 1

问题是HTML模板的结构 - 简而言之，当您拥有ion-list-header时，它会尝试在ion-label中呈现该标题的文本。嵌套ion-label（在ion-item内）的存在会破坏模板。

相反，根据此处的Ionic文档，您的ion-list-header不应包含任何子ion-item元素：https://ionicframework.com/docs/api/components/item/Item/#advanced

如果您重新构建这样的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>

在第3行注意ion-list-header已打开＆amp;闭合。

由于需要嵌套的*ngFor指令 - 我猜这是你试图在标题中嵌入ion-item元素的原因 - 我使用的是ng-container。这样，您仍然可以遍历每个“标题”项目的嵌套addonItems数组。

在这里工作Plnkr：https://embed.plnkr.co/RSd1MdmajLxpdZmTHk8J/

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

1 个答案: