Ionic v4 Firebase：无法读取未定义的属性“电子邮件”

Posted 2023-03-13

【中文标题】Ionic v4 Firebase：无法读取未定义的属性“电子邮件”

【英文标题】：Ionic v4 Firebase: cannot read property 'email' of undefined

【发布时间】：2019-05-28 08:12:46

【问题描述】：

这段代码困扰了我整整四个小时...它应该使用 Firebase 的身份验证系统和 Ionic 4 组件注册用户。

相反，它会在 6 次左右返回以下内容：

错误类型错误：无法读取未定义的属性“电子邮件”

另一个奇怪的事情是，我的代码只会在属性“电子邮件”上挑剔，并且不会因为拥有属性“密码”而返回错误。

signup.page.ts

import  Component, OnInit  from '@angular/core';
import  Router  from '@angular/router';

// firebase imports
import * as firebase from 'firebase';
import  AngularFireAuth  from '@angular/fire/auth';
import  ToastController  from '@ionic/angular';

// model import 
import  User  from '../../models/login.interface';

@Component(
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
)
export class SignupPage implements OnInit 

  constructor(
    private afAuth: AngularFireAuth,
    private route: Router,
    public toast: ToastController
  )  

  ngOnInit() 
  

  async signup(user: User) 
    console.log('starting auth');
    try 
      const result = await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
      if (result) 
          this.route.navigateByUrl('/add-profile');
      
     catch (e) 
      console.log(e);
    
  

signup.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>SIGNUP</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label position="stacked">Email</ion-label>
    <ion-input type="text" [(ngModel)]="user.email"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">Password (6+ characters)</ion-label>
    <ion-input type="password" [(ngModel)]="user.password"></ion-input>
  </ion-item>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="signup(user)">SIGNUP
    </ion-fab-button>
  </ion-fab>
</ion-content>

user.interface.ts

export interface User 
  email: string;
  pasword: string;

任何帮助将不胜感激！谢谢！

【参考方案1】：

创建一个用户并在构造函数或 ngOnInit 中使用空值对其进行初始化，如下所示

用户：用户；

//内部构造函数或ngOnInit 这个.user = 电子邮件： ''， 密码：''

【参考方案2】：

// firebase imports
import * as firebase from 'firebase';
import  AngularFireAuth  from '@angular/fire/auth';
import  ToastController  from '@ionic/angular';

// model import 
import  User  from '../../models/login.interface';

@Component(
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
)
export class SignupPage implements OnInit 

  user: User = 
  email: '',
  password: ''  
  
  constructor(
    private afAuth: AngularFireAuth,
    private route: Router,
    public toast: ToastController
  )  

  ngOnInit() 
  

  async signup(user: User) 
    console.log('starting auth');
    try 
      const result = await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
      if (result) 
          this.route.navigateByUrl('/add-profile');
      
     catch (e) 
      console.log(e);