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> 

그래서 공개 옵션으로 암호 필드를 구현하기 위해 노력하고 있지만 암호 필드의 유형을 전환하는 방법을 알아낼 수 없습니다!

당신은 입력 요소의 type 속성에 '텍스트'또는 '비밀번호'값으로 문자열을 전달하는 Property binding을 사용할 수 있습니다

Answer 1

당신은 몇 가지 옵션이

보간

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

또는

재산권

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

Answer 2

: 당신은 당신이 통해서 필요하지만이 값을 변경할 수 있습니다

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); 
}