IonInput 和 IonLabel 不是并排的

Question

我有这段代码

<ion-list>
    <ion-list-header>
    Input list:
    </ion-list-header>
    <ion-item *ngFor="let att of anArray; let idx = index">
          <ion-label color="primary" floating>{{att.labelA}}{{idx+1}}</ion-label>
          <ion-input type="text" [(ngModel)]="anArray[idx].valueA" clearInput></ion-input>
          <ion-label color="primary" floating>{{att.labelB}}{{idx+1}}</ion-label>
          <ion-input type="number" [(ngModel)]="anArray[idx].valueB" clearInput></ion-input>
          <ion-label color="primary" floating>{{att.labelC}}{{idx+1}}</ion-label>
          <ion-input type="text" [(ngModel)]="anArray[idx].valueC" clearInput></ion-input>
    </ion-item>
</ion-list>

但是为什么输出会变成

答1

B1

C1

---

---

---

我想像

答1

---

B1

---

C1

---

谢谢。

如果我在ion-item内创建一个div标签，它的位置是完美的，但无法输入数据

Answer 1

这是因为您将它们包装在一个ion-item这使得设置它们在一行中。

您需要为每个标签和输入设置单独的ion-item。如果 HTML 中不需要其他div，则可以将 ng-container 用于 for 循环。

<ng-container *ngFor="let att of anArray; let idx = index">
<ion-item>
      <ion-label color="primary" floating>{{att.labelA}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="anArray[idx].valueA" clearInput></ion-input>
</ion-item>
<ion-item>
      <ion-label color="primary" floating>{{att.labelB}}{{idx+1}}</ion-label>
      <ion-input type="number" [(ngModel)]="anArray[idx].valueB" clearInput></ion-input>
</ion-item>
<ion-item>
      <ion-label color="primary" floating>{{att.labelC}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="anArray[idx].valueC" clearInput></ion-input>
</ion-item>
</ng-container>