Ionic 2 浮动离子标签问题答案

【问题标题】：Ionic 2 floating ion-labels issueIonic 2 浮动离子标签问题
【发布时间】：2017-08-07 08:13:49
【问题描述】：

我在使用一些浮动标签时遇到问题，但不是所有的浮动标签，这让它变得更加奇怪。据我所见，我的 ion-item 写得完全一样。下面是一些图片来说明这个问题。我不确定这是否是 Ionic 2 中的错误，或者我做错了什么。如果有任何不清楚的地方或您需要更多代码，请随时提出。

如您所见，description 和 photo/video 标签在焦点对准时已经表现得像应有的那样（它们不是），但事实并非如此显示亮点。

这是一张我把它放在焦点上然后又失焦的图像。
一旦我这样做，它就会正常工作。

我写的html：

<ion-content padding>
  <form [formGroup]="complaint" (ngSubmit)="send()">

    <ion-item>
      <ion-label floating>Description*</ion-label>
      <ion-textarea [(ngModel)]="description" type="text" formControlName="description"></ion-textarea>
    </ion-item>

    <ion-item>
      <ion-label floating>Number of completed tests*</ion-label>
      <ion-input [(ngModel)]="nrTests" type="number" formControlName="nrTests"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Photo/Video</ion-label>
      <ion-input [(ngModel)]="media" formControlName="media"></ion-input>
    </ion-item>

    <button ion-button type="submit" [disabled]="!complaint.valid">Send</button>

  </form>
</ion-content>

【问题讨论】：

这里能模拟一下吗？:embed.plnkr.co/SJ8GtqbRntby5yGzLEft
我不熟悉 plunker，但我将代码放入其中（融洽关系）。也许你可以让它工作
如果在表单中添加ion-list 标记，并将所有ion-item 元素放在该ion-list 中会发生什么？
你有没有设法模拟它？
离子列表也不起作用。不，我没有设法模拟它，我必须把我的代码放在哪里？在 page1.ts 中？

标签： html mobile ionic2

【解决方案1】：

删除floating，然后尝试。我认为这将解决您的问题。

【讨论】：

【解决方案2】：

对离子标签使用堆叠属性并在离子列表中使用离子项。

【讨论】：