Angular 服务变量在组件中出现未定义

Question

I have an app that uses firebase email/password auth to login and I want to be able to display firebase auth errors to the user if they fail login.

Ive got in my AuthService:

AuthError: string;


  login(email: string, password: string) {
    this.firebaseAuth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        console.log('Nice, it worked!');
        this.navroute.navigate(['home']);
        
      })
      .catch(err => {
        console.log('Something went wrong:',err.message);
        this.AuthError = err.message;

      });
  }

But when I assign AuthError to anther variable in my login component to display to the user it comes up as undefined.

Here is a section from my login component.ts

errorMessage: string;

submit(){
    console.log("login");
    this.email = this.LoginForm.value.inputUsername;
    this.password = this.LoginForm.value.inputPassword;

    if(this.email ==  null || this.password == null){
      this.errorMessage = "Username or password cannot be empty!";
    } else{
      this.authService.login(this.email, this.password);
      this.LoginForm.reset();
      console.log(this.authService.AuthError);
    }
  }//end submit

and the console when a user fails login shows:

login
undefined
auth.service.ts:48 Something went wrong: The email address is badly formatted.

for some reason, this.authService.AuthError is undefined in the login component, when instead what I'd like for it to do is show the same message as err.message in the AuthService.

Thanks in advance and please let me know if any additional info is needed.

Answer 1

Try the below. The value in this.authService.AuthError only be available after the login, right?

  submit(){
        console.log("login");
        this.email = this.LoginForm.value.inputUsername;
        this.password = this.LoginForm.value.inputPassword;
    
        if(this.email ==  null || this.password == null){
          this.errorMessage = "Username or password cannot be empty!";
        } else{
    
          this.authService.login(this.email, this.password).subscribe(data= {
    
     console.log(this.authService.AuthError);
    });
         
         
        }
      }//

end submit