Как отобразить несколько данных, выбранных в переключателе?

Question

Это многоуровневое аккордеонное меню, а на 3-м уровне рядом со списком предметов есть переключатель. Я надеюсь, что кто-то уже сделал это и может иметь отношение к этой проблеме. Пожалуйста, уделите время тому, чтобы помочь кому-то, кто изо всех сил старается сделать что-то для своих проектов, так как этот курс не имеет много ресурсов для изучения каждой проблемы. Спасибо за ваши будущие ответы, парни, благослови вас Бог.

Это не просто обычная кнопка-переключатель, все ее данные взяты из menu.json, который выглядит какthis.

menu.json

{
  "items": [
    {
      "name": "MAIN",
      "children": [
        {
          "name": "Main Door",
          "children": [
            {
              "name": "Painted door lock"
            },
            {
              "name": "Painted door"
            },
            {
              "name": "Damaged door"
            },
            {
              "name": "Damaged door lock"
            },
            {
              "name": "Painted hinge"
            },
            {
              "name": "Stuck door"
            },
            {
              "name": "With gap below"
            },
            {
              "name": "Paint with cracks"
            },
            {
              "name": "Unfinished door paint"
            },
            {
              "name": "Gaps beside door knob"
            },
            {
              "name": "Door with voids"
            }
          ]
        }
      ]
    }
  ]
}

from.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@IonicPage()
@Component({
  selector: 'page-form',
  templateUrl: 'form.html',
})
export class FormPage {
  data: any[];

  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
    let localData = this.http.get('assets/data/menus.json').map(res => res.json().items);
    localData.subscribe(data => {
      this.data = data;
    });
  }

  toggleSection(i) {
    this.data[i].open = !this.data[i].open;
  }

  toggleItem(i, j) {
    this.data[i].children[j].open = !this.data[i].children[j].open;

  }



  ionViewDidLoad() {
    console.log('ionViewDidLoad FormPage');
  }

}

form.html

<ion-content>
  <ion-list class="accordion-list">
    <!-- first level -->
      <ion-list-header *ngFor="let item of data; let i = index" no-lines no-padding style="margin-bottom: 0%">

          <button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
            <ion-icon item-left name="ios-arrow-forward" *ngIf="!item.open"></ion-icon>
            <ion-icon item-left name="ios-arrow-up" *ngIf="item.open"></ion-icon>
            {{ item.name }}
          </button>

            <ion-list *ngIf="item.children && item.open" no-lines style="margin-bottom: 0%">
              <!-- Second Level -->
              <ion-list-header *ngFor="let child of item.children; let j = index" no-padding style="margin-bottom: 0%">
                <!-- Toggle Button -->
                  <button ion-item (click)="toggleItem(i, j)" detail-none class="child-item" *ngIf="child.children" no-padding no-lines>
                    <ion-icon item-left name="add" *ngIf="!child.open"></ion-icon>
                    <ion-icon item-left name="close" *ngIf="child.open"></ion-icon>
                    {{ child.name }}
                  </button>

            <!-- Direct Add Button -->
            <!-- <ion-item *ngIf="!child.children" detail-none class="child-item" text-wrap no-lines>
              <h2>{{ child.name }}</h2>
              <p text-lowercase>{{ child.information }}</p>
              <button ion-button outline item-end (click)="buyItem(child)">{{ child.price }}</button>
            </ion-item> -->

            <ion-list *ngIf="child.children && child.open">
              <!-- Third-Level -->
              <ion-item *ngFor="let item of child.children" detail-none class="child-item" text-wrap no-lines>
                <ion-label>{{ item.name }}</ion-label>
                <ion-radio  (ionSelect)="selectRad(item)" [value]="item"></ion-radio>
                <!-- <ion-radio slot="end" color="danger" checked></ion-radio> -->

              </ion-item>
            </ion-list>

          </ion-list-header>
        </ion-list>

      </ion-list-header>
    </ion-list>

<div class="issue">
  <ion-card>
    <ion-card-header>
      Problems to be fix
    </ion-card-header>
    <ion-card-content>
      All data that is selected from radio button should display here...
    </ion-card-content>
    <button ion-button full (click)="AreaPage()">Submmit</button>
  </ion-card>
</div>

</ion-content>

Все выбранные данные будут отображаться следующим образом

Проблемы, которые необходимо решить

Main

Главная дверь

PAINTED DOOR 

LOCK PAINTED DOOR 

Answer 1

Может ли использование ion-select вместо ion-list быть решением? https://ionicframework.com/docs/api/select

ion-select поддерживает выбор нескольких элементов.