如何动态更改ionic2/Angular2中输入字段的类型?
问题描述:
我想实现的密码字段与显示选项如何动态更改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>
所以,我可以改变图标,但我无法弄清楚如何切换密码字段的类型!
答
您有几种选择
插值
<ion-input type="{{ isActive ? 'password' : 'text' }}"></ion-input>
或
属性绑定
<ion-input [type]="isActive ? 'password' : 'text'"></ion-input>
答
您可以使用Property binding传递一个字符串,如“文本”或“密码”值与输入元素的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'
或者设置字符串值以将逻辑移出模板并进入控制器的方法。
这是一个plunker演示功能显示设置等于一个类字符串属性和三元语句。
答
HTML文件:
<input type="{{isPassword ? 'password' : 'text' }}">
<button type="button" (click)="show()">show password</button>
TS文件:
isPassword = true;
show() {
this.isPassword = !(this.isPassword);
}
**属性绑定**为我工作。 – MontaWiso