如何在ionic2 / Angular2中動態更改輸入字段的類型？

Question

我正在嘗試使用reveal選項實現密碼字段

<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綁定將諸如'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'的三元語句將值更改為您需要的值isActive ? 'password':'text' isActive ? 'password':'text'或者是設置字符串值以將邏輯移出模板並進入控制器的方法。

這是一個演示功能的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);
}