Odtnhj

I'm new in Ionic and I want to create list in which in each ion-item there will be checbox and when user checks it then select will appear in new line but still within ion-item. I've tried to use ion-item inside ion-item but then select wasn't showing. I've read that there is some issue with nested ion-items so I replaced first ion-item with ng-container but after that all layout looks terrible. What should I do?

 <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>

I figured it out - in ion-list I put ion-card-content with ngFor as a wrapper for ion-items. Works and looks good!

 <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>