Как я могу получить значение вложенного массива JSON в Ionic?
Я новичок в 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 из внутреннего массива JSON addonItems?
Когда я запускаю код, он дает мне имена из основного массива (addonCategories), но не из внутреннего (addonItems).
Ответы 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/
Привет, @Stevangelista! Это отлично сработало, и ваш рабочий пример - лучший. Отличная работа.