错误类型错误:提交登录表单时无法读取离子中未定义的属性“value”

我在我的Ionic应用程序中创建了一个登录页面,但是当我单击Submit按钮时,我收到了一条错误消息

错误类型错误:无法读取未定义的属性“value”

错误图像

是的。

这是我的完整login.ts代码,它应该使用注册的用户名和密码通过php中的webservice登录。

import { Component, ViewChild  } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { RegisterPage } from '../register/register';
import {Http, Headers, RequestOptions}  from "@angular/http";
import { LoadingController } from 'ionic-angular';
import 'rxjs/add/operator/map';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})


export class LoginPage {

  @ViewChild("username") username;

  @ViewChild("password") password;

  data:string;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController,
     private http: Http, public loading: LoadingController, public navParams: NavParams) {

  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  registerPage(){
    this.navCtrl.push(RegisterPage);
  }


  signIn(){

    //// check to confirm the username and password fields are filled

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

    let alert = this.alertCtrl.create({

    title:"ATTENTION",

    subTitle:"Username 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

    {

    var headers = new Headers();

    headers.append("Accept", 'application/json');

    headers.append('Content-Type', 'application/json' );

    let options = new RequestOptions({ headers: headers });

    let data = {

    username: this.username.value,

    password: this.password.value

    };

    let loader = this.loading.create({

    content: 'Processing, please wait…',

    });

    loader.present().then(() => {

    this.http.post('http://localhost:90/totallight/api/login.php',data,options)

    .map(res => res.json())

    .subscribe(res => {

    console.log(res)

    loader.dismiss()

    if(res=="Your Login success"){

    let alert = this.alertCtrl.create({

    title:"CONGRATS",

    subTitle:(res),

    buttons: ['OK']

    });

    alert.present();

    }else

    {

    let alert = this.alertCtrl.create({

    title:"ERROR",

    subTitle:"Your Login Username or Password is invalid",

    buttons: ['OK']

    });

    alert.present();

    }

    });

    });

    }

    }

}

登录.html

<ion-header >

    <ion-navbar class="header">
      <ion-title>Login</ion-title>
    </ion-navbar>

  </ion-header>
    <ion-content padding class="loginpages">
      <ion-grid>
          <ion-row>
              <ion-col col-12 class="divme">
                  <ion-input  round type="text" placeholder="Username" name="username" #username></ion-input>
              </ion-col>

              <ion-col col-12 class="divme">
                  <ion-input  round type="password" placeholder="Password" name="password" #username></ion-input>
              </ion-col>
            </ion-row>

            <ion-row justify-content-start class="drow">
                <ion-col col-6 class="col">
                  <div>  <button ion-button round block (click)="signIn()">Sign In</button></div>
                </ion-col>
                <ion-col col-6 class="col">
                  <div><button ion-button round (click)="registerPage()">Register</button></div>
                </ion-col>
          </ion-row>
     </ion-grid>

</ion-content>

有人能告诉我正确的方向吗?

谢谢。