Question

我正在尝试按照these video tutorials创建一个基本的Ionic Web应用程序。

我在以下声明中得到TypeError：

console.log('would login user with ', this.user.value, this.password.value)

错误消息是

错误类型错误：无法读取属性＆＃39;值＆＃39;未定义的

以下是我的完整login.ts代码，该代码应通过Firebase使用已注册的邮件ID和密码登录：

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';

/**
* 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') user;
@ViewChild('password') password;

constructor(private fire: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
}

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

signInUser() {
**console.log('would login user with ', this.user.value, this.password.value);**
//this line is giving error.
this.fire.auth.signInWithEmailAndPassword(this.user.value, this.password.value)


}
}

的login.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Login
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<ion-list>

  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>
</ion-list>

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

</ion-content>

Answer 1

使用ngAfterViewInit封闭您的Console.log。

ngAfterViewInit() {
  console.log('would login user with ', this.user.value, this.password.value);
}

Answer 2

将您的标记更改为：

<ion-list>
  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text" #username ></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password" #password></ion-input>
  </ion-item>
</ion-list>

使用模板参考变量 - https://angular.io/guide/template-syntax#template-reference-variables--var-

错误类型错误：无法读取属性＆＃39;值＆＃39;未定义的

2 个答案: