Вложенный элемент внутри иона не отображается

Question

Я новичок в Ionic и хочу создать список, в котором в каждом ионном элементе будет чекбокс, и когда пользователь проверяет его, тогда выбор появится в новой строке, но все еще внутри ионного элемента. Я пытался использовать ion-item внутри ion-item, но затем выбор не отображался. Я читал, что есть проблема с вложенными ионными элементами, поэтому я заменил первый ионный элемент на ng-container, но после этого все макеты выглядят ужасно. Что мне делать?

  <ion-list>
      <ng-container *ngFor="let filter of filters">
          <ion-label> {{filter.name}}</ion-label>
          <ion-checkbox item-right [(ngModel)]="filter.checked" (ionChange)="onCheckboxChange($event, filter)"></ion-checkbox>
          <ion-item>
            <ion-select [(ngModel)]="option">
              <ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
            </ion-select>
          </ion-item>
        </ng-container>
  </ion-list>

Answer 1

Я понял - в списке ионов я поместил содержимое ионных карт с помощью ngFor в качестве обертки для элементов ion. Работает и выглядит хорошо!

  <ion-list>
    <ion-card-content *ngFor="let filter of filters" class="card-wrapper">
      <ion-item class="checkbox-item">
        <ion-label> {{filter.name}}</ion-label>
        <ion-checkbox item-right [(ngModel)]="filter.checked"></ion-checkbox>
      </ion-item>
      <ion-item>
        <ion-select [(ngModel)]="option">
          <ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
        </ion-select>
      </ion-item>
    </ion-card-content>
  </ion-list>