Ионный список с кнопкой и флажком в одной строке

Question

Я пытаюсь получить список ионов с кнопкой и флажком или радио в конце строки.Это мой код без флажка / радио:

<button ion-item (click)="editItem(i, item)">
    <ion-avatar item-start>
        <img [src]="item.photo" />
    </ion-avatar>
    <h2>{{item.name}}</h2>
    <p>{{item.info}}</p>
</button>

Это работает, и я могу показать любую информацию об объекте Item.
Если я добавлю флажок или радио, моя информация исчезнет, ​​а нажатие кнопки не сработает (всегда активировать событие изменения флажка).

<button ion-item (click)="editItem(i, item)">
    <ion-avatar item-start>
        <img [src]="item.photo" />
    </ion-avatar>
    <h2>{{item.name}}</h2>
    <p>{{item.info}}</p>
    <ion-checkbox (ionChange)="fireEvent(i, $event)"></ion-checkbox>
</button>

Как мне иметь кнопку и флажок в одной строке?

Answer 1

Вы можете использовать систему сетки для размещения элементов в одной строке:

<ion-grid>
  <ion-row>
    <ion-col>
     <button ion-item (click)="editItem(i, item)">
      <ion-avatar item-start>
        <img [src]="item.photo" />
      </ion-avatar>
     <h2>{{item.name}}</h2>
     <p>{{item.info}}</p>
     </button>
    </ion-col>
    <ion-col>
      <ion-checkbox (ionChange)="fireEvent(i, $event)"></ion-checkbox>
   </ion-col>
  </ion-row>
 </ion-grid>

подробнее здесь:

https://ionicframework.com/docs/api/components/grid/Grid/