Question

我正在尝试使用揭密选项

实现密码字段

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

所以，我可以更改图标，但我无法弄清楚如何切换密码字段的类型!!

Answer 1

您有几个选择

<强>插值

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

或

属性绑定

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

Answer 2

您可以使用Property binding将“text”或“password”值等字符串传递给input元素的type属性：

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>

您可以通过使用isActive ? 'password':'text'的三元语句或者设置字符串值以将逻辑移出模板并进入控制器的方法来更改值。 p>

这是一个plunker，演示了这两个设置等于类字符串属性和三元语句的功能。

Answer 3

HTML文件：

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

TS档案：

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

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

3 个答案: