Question

我正在玩离子2，并且存在我无法使用javascript区域中的输入字段的问题。

这是我的页面内容，仅显示带按钮的登录区域家

  <ion-content class="home">
  <ion-list>
      <ion-item>
          <ion-input type="text" placeholder="User Name" [(ngmodel)]="username"></ion-input> 
      </ion-item>
      <ion-item>
        <ion-input type="password" placeholder="password"></ion-input>
        </ion-item>

    </ion-list>
    <div class="button-center">
        <button (click)="login()">Login</button>
      </div>
  </ion-content>

现在我想访问javascript区域中的用户名，以便在警告框中显示用户名输入字段的值。

import {Page} from 'ionic-angular';
@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor() {

  }

  login(){
    alert("username: " + this.username);
  }

}

但是变量用户名始终是未定义的

Answer 1

您必须在构造函数之前定义组件中的用户名和密码。并使用[（ngModel）]作为输入密码。

Answer 2

像尹提到的那样：

<ion-content class="home">
  <ion-list>
      <ion-item>
          <ion-input type="text" placeholder="User Name" [(ngModel)]="username"></ion-input> 
      </ion-item>
      <ion-item>
        <ion-input type="password" placeholder="password"></ion-input>
        </ion-item>
 </ion-list>

    <div class="button-center">
        <button (click)="login()">Login</button>
      </div>
  </ion-content>

您的ngModel未正确输入。请注意大写字母M.

import {Page} from 'ionic-angular';
@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor() {
     this.username = null;    
  }

  login(){
    alert("username: " + this.username);
  }

}

Answer 3

使用它，它应该解决你的挑战

html文件

   <ion-card>    
     <div padding>

        <ion-list no-lines>
          <ion-item  >
            <

ion-input  round type="text" placeholder="Email" name="email" #email></ion-input>
      </ion-item>

      <ion-item>
        <ion-input type="password" placeholder="Password" name="password" #password></ion-input>
      </ion-item>

    </ion-list>
    </div>

    </ion-card>

    <div padding>
    <button ion-button round block (click)="signIn()">Sign In</button>
    </div>

和你的文件

import { Component, ViewChild  } from '@angular/core';
....
.....

export class LoginPage { 

@ViewChild("email") email;
@ViewChild("password") password;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController,private toast: ToastController, private http: Http) {


 }
signIn(){

  if(this.email.value=="" ){

 let alert = this.alertCtrl.create({

 title:"ATTENTION",
 subTitle:"Email field is empty",
 buttons: ['OK']
 });

 alert.present();
  } else
 if(this.password.value==""){

 let alert = this.alertCtrl.create({

 title:"ATTENTION",
 subTitle:"Password field is empty",
 buttons: ['OK']
 });

 alert.present();

}
 else
 {
// carry on with login process
}

Ionic2：如何在javascript中使用输入字段值？

3 个答案: