Ionic v4 Firebase: не может прочитать свойство 'email' из неопределенного

Question

Этот код беспокоит меня уже четыре часа ... Предполагается, что он зарегистрирует пользователя с системой аутентификации Firebase и компонентами Ionic 4.

Вместо этого он возвращает следующее хорошее шесть раз:

ОШИБКА TypeError: Невозможно прочитать свойство электронной почты с неопределенным значением

Еще одна странная вещь заключается в том, что мой код будет придираться только к электронной почте свойства', и не будет возвращать ошибки из-за наличия свойства' пароль '.

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;
}

Любая помощь будет оценена!Спасибо!

Answer 1

// 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);
    }
  }

}

Answer 2

Создайте пользователя и инициализируйте его с пустыми значениями в конструкторе или ngOnInit, как показано ниже

user: User;

// внутри конструктора или ngOnInit this.user = {email: '', пароль: ''}