Javascript 第一次单击时未显示Angular 4 Firebase错误消息

我正在使用angular 4进行Firebase身份验证。我试图显示错误消息，但在第二次单击时显示。在控制台中，它在第一次单击时显示错误，但当我将其绑定到HTML组件时，它在第二次单击时显示单击。我正在使用以下身份验证服务

import { Injectable } from '@angular/core';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Router } from "@angular/router";
import * as firebase from 'firebase';

@Injectable()
export class AuthService {

  authState: any = null;
  isLoggedIn: any;
  error: any;

  constructor(private afAuth: AngularFireAuth,
              private db: AngularFireDatabase,
              private router:Router) {

            this.afAuth.authState.subscribe((auth) => {
              this.authState = auth
            });
          }

  // Returns true if user is logged in
  get authenticated(): boolean {
    return this.authState !== null;
  }

  // Returns current user data
  get currentUser(): any {
    return this.authenticated ? this.authState : null;
  }

  // Returns
  get currentUserObservable(): any {
    return this.afAuth.authState
  }

  // Returns current user UID
  get currentUserId(): string {
    return this.authenticated ? this.authState.uid : '';
  }
  emailLogin(email:string, password:string) {
     return this.afAuth.auth.signInWithEmailAndPassword(email, password)
       .then((user) => {
         this.router.navigate(['/dashboard_home'])
         this.isLoggedIn = this.authenticated;
       })
       .catch(error => {
        this.error = error;
        console.log(error)
      });
  }

  // Sends email allowing user to reset password
  resetPassword(email: string) {
    var auth = firebase.auth();

    return auth.sendPasswordResetEmail(email)
      .then(() => console.log("email sent"))
      .catch((error) => console.log(error))
  }


  //// Sign Out ////
  signOut(): void {
    this.afAuth.auth.signOut();
    this.router.navigate(['/administrator'])
  }

  //// Helpers ////
  private updateUserData(): void {
  // Writes user name and email to realtime db
  // useful if your app displays information about users or for admin features
    let path = `users/${this.currentUserId}`; // Endpoint on firebase
    let data = {
                  email: this.authState.email,
                  name: this.authState.displayName
                }

    this.db.object(path).update(data)
    .catch(error => console.log(error));

  }
}

我的login.html页面看起来是这样的

<div class="card-block">
   <div class="alert alert-danger" role="alert" *ngIf="error">{{ error }}</div>
   <form autocomplete="off" id="loginAdmin" (submit)="loginAdmin($event)">
      <div class="row">
         <div class="col-md-4 mx-auto">
            <mat-form-field>
               <input type="text" id="username" name="username" matInput placeholder="Användarnamn">
            </mat-form-field>
         </div>
      </div>
      <div class="row">
         <div class="col-md-4 mx-auto">
            <mat-form-field>
               <input type="password" id="password" name="password" matInput placeholder="Lösenord">
            </mat-form-field>
         </div>
      </div>
      <div class="row"></div>
      <div class="row">
         <div class="col-md-12 text-center">
            <button type="submit" mat-raised-button>Logga in</button>
         </div>
      </div>
   </form>
</div>

<div class="alert alert-danger" role="alert" *ngIf="error">{{ error }}</div>

如果您使用上述服务，您可以登录使用。但是，如果电子邮件和密码不正确，它会在控制台中显示错误，并且在与HTML绑定时不会显示错误。 装订看起来是这样的

<div class="card-block">
   <div class="alert alert-danger" role="alert" *ngIf="error">{{ error }}</div>
   <form autocomplete="off" id="loginAdmin" (submit)="loginAdmin($event)">
      <div class="row">
         <div class="col-md-4 mx-auto">
            <mat-form-field>
               <input type="text" id="username" name="username" matInput placeholder="Användarnamn">
            </mat-form-field>
         </div>
      </div>
      <div class="row">
         <div class="col-md-4 mx-auto">
            <mat-form-field>
               <input type="password" id="password" name="password" matInput placeholder="Lösenord">
            </mat-form-field>
         </div>
      </div>
      <div class="row"></div>
      <div class="row">
         <div class="col-md-12 text-center">
            <button type="submit" mat-raised-button>Logga in</button>
         </div>
      </div>
   </form>
</div>

<div class="alert alert-danger" role="alert" *ngIf="error">{{ error }}</div>

{{error}

---

现在我想要的是，在第一次单击时发送显示错误，并获取所有登录的用户数据。

我喜欢这个解决方案。这项服务对我有用

import {AngularFireAuth} from 'angularfire2/auth';

@Injectable()
export class AuthService {

  authState: any = null;

  constructor(private afAuth: AngularFireAuth, private router: Router) {
    this.afAuth.authState.subscribe((auth) => {
      this.authState = auth
    });
  }

  get isUserAnonymousLoggedIn(): boolean {
    return (this.authState !== null) ? this.authState.isAnonymous : false
  }

  get currentUserId(): string {
    return (this.authState !== null) ? this.authState.uid : ''
  }

  get currentUserName(): string {
    return this.authState['email']
  }

  get currentUser(): any {
    return (this.authState !== null) ? this.authState : null;
  }

  get isUserEmailLoggedIn(): boolean {
    if ((this.authState !== null) && (!this.isUserAnonymousLoggedIn)) {
      return true
    } else {
      return false
    }
  }

  signUpWithEmail(email: string, password: string) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((user) => {
        this.authState = user
      })
      .catch(error => {
        console.log(error)
        throw error
      });
  }

  loginWithEmail(email: string, password: string) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((user) => {
        this.authState = user
      })
      .catch(error => {
        console.log(error)
        throw error
      });
  }

  signOut(): void {
    this.afAuth.auth.signOut();
    this.router.navigate(['/'])
  }
}

---

有关更多详细信息，请访问

Hiya您是如何更改组件和视图以实际显示您在AuthService中抛出的错误的？这是我近三天来面临的问题。请点击帮助我解决这个问题的链接。在你看来这已经过去了{{errorMessage}}

{{error.message}}

检查用户是否登录