Ionic 2 获取离子输入值答案

【问题标题】：Ionic 2 get ion-input valueIonic 2 获取离子输入值
【发布时间】：2017-10-14 17:19:05
【问题描述】：

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

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>

【问题讨论】：

如果你已经知道你需要 NgModule，并且你知道它可以工作，但需要进一步解释它是如何在幕后工作的，我建议你阅读文档angular.io/docs/ts/latest/guide/ngmodule.html。因为没有必要回答一个你知道答案的问题。
不，它不起作用。上面的代码不起作用
所以你的教程对我没有帮助。但我找到了另一个：joshmorony.com/…

标签： typescript input ionic2

【解决方案1】：

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

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>

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

【讨论】：