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-item内添加包含ion-input？

的图标

Answer 1

请检查一下。这对我来说非常适合离子2。

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

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

Answer 4

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

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

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

4 个答案: