Question

我正在创建一个带有ion-checkbox的离子列表，但是列表单元格中的数据是水平显示的。

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

这是我运行它时的样子：

Image

我该怎么做才能使数据垂直对齐而不是水平对齐？谢谢。

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>

IONIC ::带有离子复选框的离子列表内数据的垂直对齐

1 个答案: