Как я могу получить значение вложенного массива JSON в Ionic?

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>

Так как я могу получить name s из внутреннего массива JSON 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 открывается и закрывается.

Из-за необходимости в вложенных директивах *ngFor - я предполагаю, почему вы пытались встроить элементы ion-item в заголовок - вместо этого я использовал ng-container.Таким образом, вы по-прежнему можете перебирать массив каждого вложенного элемента заголовка addonItems.

Рабочий Plnkr здесь: https://embed.plnkr.co/RSd1MdmajLxpdZmTHk8J/