Ionic 2 - 无法在包含离子输入的离子项内添加离子图标答案

【问题标题】：Ionic 2 - Cannot add an ion-icon inside an ion-item containing a ion-inputIonic 2 - 无法在包含离子输入的离子项内添加离子图标
【发布时间】：2019-10-03 13:05:04
【问题描述】：

我正在使用 Ionic 2，并在我的应用程序中创建了一个表单，如果出现验证错误，信息图标将出现在其相关输入字段的右侧。 HTML如下，

<ion-list inset padding>
        <ion-item>
            <ion-input type="text" placeholder="Email"></ion-input>
            <ion-icon name="ios-information-circle-outline" item-right></ion-icon>
        </ion-item>
    </ion-list>

这工作得很好。但是每当我在ion-icon 上添加一个 *ngIf 时，它就会从 ui 中消失。这是一个示例，我将 *ngIf 设置为 true 以查看它是否有效。图标不显示。

<ion-list inset padding>
        <ion-item>
            <ion-input type="text" placeholder="Email"></ion-input>
            <ion-icon name="ios-information-circle-outline" item-right *ngIf="true"></ion-icon>
        </ion-item>
    </ion-list>

当<ion-input> 从上面的示例中删除时，<ion-icon> 会显示出来。

这是 Ionic 2 中的限制吗？如何在包含ion-input 的ion-item 中添加图标？

【问题讨论】：

标签： css ionic-framework ionic2

【解决方案1】：

请检查一下。这在 ionic2 中非常适合我。

<ion-item class="from-group details">
<ion-label fixed>Details</ion-label>
 <ion-input type="file"></ion-input>
  <ion-icon name="ios-camera-outline" item-right ></ion-icon>
 <ion-icon ios="ios-cloud-upload" md="md-cloud-upload"  item-right ></ion-icon>

【讨论】：

如果您添加边框颜色，您可以看到差异

【解决方案2】：

请尝试 ngClass 作为解决此问题的方法

    <ion-item> 
        <ion-input type="text" placeholder="Email"></ion-input>
        <ion-icon [ngClass]="{'hide': true }" name="ios-information-circle-outline" ></ion-icon>
    </ion-item>

    <style>.hide { display:none; } </style>

【讨论】：

【解决方案3】：

我面临同样的问题，离子 2 中存在一些问题，现在我是这样做的

<ion-row>
    <ion-col col-1>
          <ion-icon name="phone-portrait"></ion-icon>
    </ion-col>
    <ion-col col-11>
        <ion-item>
          <ion-label floating>Phone number</ion-label>
          <ion-input [(ngModel)]=" phoneNumber"  name="phoneNumber"  type="number"></ion-input>
        </ion-item>
    </ion-col>
</ion-row>

【讨论】：

【解决方案4】：

在ion-icon 中使用item-left 或item-right：

<ion-item>
  <ion-icon name="laptop" item-left></ion-icon>
  <ion-label>IT</ion-label>
</ion-item>

【讨论】：