我正在使用 ionic 2 创建登录名。请不要只回答“您只需要添加 [(ngModules)] 属性”。如果您认为这就是解决方案,请解释原因。解释一下,就像对孩子做的那样。
我的代码在login.ts:
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams, MenuController} from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
password: string;
constructor(public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) {
this.menu.enable(false, "");
}
login() {
alert(this.password);
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
}
代码在登录.html
<ion-content padding id="login-dialog">
<ion-list inset>
<ion-item no-padding>
<ion-label color="primary">
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input type="text" placeholder="Username"></ion-input>
</ion-item>
<ion-item no-padding>
<ion-label color="primary">
<ion-icon name="lock"></ion-icon>
</ion-label>
<ion-input type="password" placeholder="Password"></ion-input>
</ion-item>
<button ion-button full color="primary" (click)="login()">Login</button>
</ion-list>
</ion-content>
上面的代码将不起作用,因为您没有将输入元素绑定到登录组件中的任何属性。为此,您必须使用角度数据绑定。
https://angular.io/docs/ts/latest/guide/template-syntax.html https://angular.io/docs/ts/latest/guide/template-syntax.html
请将您的代码更改为以下内容。
<ion-item no-padding>
<ion-label color="primary">
<ion-icon name="lock"></ion-icon>
</ion-label>
<ion-input [(ngModel)]="password" type="password" placeholder="Password"></ion-input>
</ion-item>
因此,您在输入中键入的任何内容都会更新模型(您在组件中定义的属性密码)。然后它会提示密码。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)