IONIC :: Вертикальное выравнивание данных внутри ионного списка с флажком ion

Question

Я создаю ионный список, сопровождаемый ионным флажком, но данные внутри ячеек списка отображаются горизонтально.

<ion-item class="item" *ngFor="let item of collection">
    <ion-label>{{ item.nameMother }}</ion-label>
    <ion-label>{{ item.nameChild }}</ion-label>
    <ion-label>{{ item.birthDate }}</ion-label>
    <ion-label>{{ item.Form }}</ion-label>
    <ion-label>{{ item.countdown }}</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

Вот как это выглядит, когда я запускаю его:

Изображение

Что можно сделать для выравнивания данных по вертикали, а не по горизонтали?Благодаря.

Answer 1

Вместо использования ионного элемента и ионной метки я использовал ионное содержание вместе с таблицей.Поэтому он отображает любой порядок вашей таблицы соответственно.

<ion-content class="item" *ngFor="let item of collection">
    <ion-checkbox class="checkbox"></ion-checkbox>
    <table class="dataDisplay">
      <tr>
        <th>NAME OF MOTHER: </th>
        <td>{{ item.nameMother }}</td>
      </tr>
      <tr>
        <th>NAME OF CHILD: </th>
        <td>{{ item.nameChild }}</td>
      </tr>
      <tr>
        <th>DATE OF BIRTH (MM/DD/YYYY):</th>
        <td>{{ item.birthDate | date }}</td>
      </tr>
      <tr>
        <th>FORM COMPLETE: </th>
        <td>{{ item.Form }}</td>
      </tr>
      <tr>
        <th>Countdown: </th>
        <td><strong>{{ item.countdown }}</strong></td>
      </tr>
    </table>
  </ion-content>