typescript Ionic 2 获取离子输入值

Ionic 2 get ion-input value

提问by Bj?rn Pfoster

I am creating a login with ionic 2. Please don't just answer "you just need to add the [(ngModules)]-attribute". If you think, this is the solution, please explain it why. Explain it, like you would do it to a child.

我正在使用 ionic 2 创建登录。请不要只回答“您只需要添加 [(ngModules)] 属性”。如果您认为这是解决方案，请解释原因。解释一下，就像你对孩子做的那样。

My Code in login.ts:

我在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');
  }
}

The Code in login.html

login.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>

回答by ashley

The above code will not work because you are not binding your input element to any property in the login component. You have to use angular data binding for that.

上面的代码将不起作用，因为您没有将输入元素绑定到登录组件中的任何属性。您必须为此使用角度数据绑定。

https://angular.io/docs/ts/latest/guide/template-syntax.html

https://angular.io/docs/ts/latest/guide/template-syntax.html

Please change your code to the below.

请将您的代码更改为以下内容。

<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>

So whatever you type in the input will update the model (the property passsword you defined in your component). It will then alert the passsword.

因此，无论您在输入中输入什么，都会更新模型（您在组件中定义的属性密码）。然后它会提醒密码。