Question

我是Ionic的新手，我想创建一个列表，其中每个离子项目中都会有一个复选框，当用户检查它时，select会出现在新行中，但仍在离子项目中。我尝试在ion-item中使用ion-item，但是随后没有显示select。我读到嵌套离子项目存在一些问题，因此我用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的离子卡含量放在ngFor的包装中。可行，看起来不错！

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

离子项目中的嵌套元素未显示

1 个答案: