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

Question

我正在使用 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 中添加图标？

Answer 1

请尝试使用 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>

Answer 2

我遇到了同样的问题，ionic 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>

Answer 3

请检查一下。这在 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>

Answer 4

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

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

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

Ionic 2 - Cannot add an ion-icon inside an ion-item containing a ion-input

css

ionic-framework

ionic2