离子2获得离子输入值 [英] Ionic 2 get ion-input value

问题描述

我正在使用ionic 2创建一个登录名.请不要仅仅回答您只需要添加[(ngModules)]-属性".如果您认为这是解决方案，请解释原因.解释它，就像对孩子一样.

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.

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

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>

推荐答案

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

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

请将您的代码更改为以下代码.

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.

这篇关于离子2获得离子输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！