ionic2/Angular2の入力フィールドのタイプを動的に変更するにはどうすればよいですか？

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

あなたは、このような入力要素のtype属性には「text」または「パスワード」の値として文字列を渡すためにProperty bindingを使用することができます。

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'を使用している三項ステートメント、またはロジックをテンプレートからコントローラに移動するための文字列値を設定するメソッドなどがあります。

plunkerは、クラス文字列プロパティと3値ステートメントの両方の設定を示す機能を示しています。

Answer 3

HTMLファイルのバインドがあります。

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

TSファイル：

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