如何动态更改ionic2/Angular2中输入字段的类型？

我正在尝试实现一个带有显示选项的密码字段

<ion-item>
  <ion-label color="dark" fixed>Mot De Passe</ion-label>
  <ion-input type="password"></ion-input>
  <ion-icon
      [name]="isActive?'eye':'eye-off'"
      item-right
      (click)="isActive=!isActive;"
      isActive=true>
 </ion-icon>
</ion-item>

路况

因此，我可以更改图标，但我不知道如何切换密码字段的类型

您可以使用将字符串（如“text”或“password”值）传递给输入元素的

类型

属性：

export class SomePage {
    type: string = "text";
    isActive: Boolean = false; 

    constructor() {}

    getType() {
        return isActive ? 'password' : 'text';
    }

    setType() {
        this.type = isActive ? 'password' : 'text';
    }
}

<ion-item>
  <ion-label color="dark" fixed>Mot De Passe</ion-label>
  <ion-input [type]="type"></ion-input>
  <ion-input [type]="getType()"></ion-input>
  <ion-icon
      [name]="isActive ? 'eye' : 'eye-off'"
      item-right
      (click)="isActive = !isActive;"
      isActive=true>
 </ion-icon>
</ion-item>

导出类SomePage{
类型：string=“text”；
isActive:Boolean=false；
构造函数（）{}
getType（）{
返回isActive“密码”：“文本”；
}
setType（）{
this.type=isActive？'password'：'text'；
}
}
路况

您可以通过使用的三元语句

isActive？”将值更改为所需的值密码“：“text”

或者是一种设置字符串值的方法，用于将逻辑移出模板并移入控制器

下面是一个演示功能的示例，其中显示了设置等于类字符串属性和三元语句。

您有几个选项

插值

<ion-input type="{{ isActive ? 'password' : 'text' }}"></ion-input>

或

属性绑定

<ion-input [type]="isActive ? 'password' : 'text'"></ion-input>

HTML文件：

<input type="{{isPassword ? 'password' : 'text' }}">
<button type="button" (click)="show()">show password</button>

isPassword = true;
show() {
    this.isPassword = !(this.isPassword);
}