在 Angular 中将数据从 service.ts 传递到 component.ts 时出现逻辑错误

Question

我正在做一个书店项目。 我有一个 auth.service.ts 文件和注册组件。 我想做的是从组件文件调用位于服务中的 register()，然后我想通过“errMsg”将错误消息返回给组件。 看下面的服务文件--

export class AuthService {

  constructor() { }

  isLoading: boolean = false;
  
  errMsg: string = '';
  
  // REGISTER
  register(form: RegisterForm) {
    const auth = getAuth();

    createUserWithEmailAndPassword(auth, form.email, form.password)
      .then((userCredential) => {
        console.log(userCredential);
        
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // console.log(errorCode, errorMessage);
        
        this.errMsg = errorMessage;
        
      })
      .finally(() => {
        this.isLoading = false;
      });

      return this.errMsg
  }
}

注册.component.ts--

export class RegisterComponent {

  constructor(private authService: AuthService) {

  }
  form: RegisterForm = {
    email: '',
    password: '',
    confirm_password: ''
  }
  
  passwordMatched: boolean = true;
  
  errMsg: string = '';
  isLoading: boolean = false;

  submit() {
    
    if(this.isLoading) {return;}

    this.isLoading = true;
    
    if(this.form.password != this.form.confirm_password) {
      this.passwordMatched = false;
      this.isLoading = false 
      return;
    }

    this.errMsg = this.authService.register(this.form);
    console.log(this.errMsg);
    
    this.isLoading = false;
  }
}

这个errMsg在模板中用作--

<div *ngIf=" errMsg != '' ">
      {{errMsg}}
</div>

所以，问题是当服务返回错误时，它只是在我第一次按下提交时才以某种方式没有存储在组件文件的“errMsg”变量中。第二次按提交时，错误显示正确。我认为有一些异步过程以某种方式进行，但我不知道如何进行。

我期待如果收到错误，它应该立即显示在模板上。

Answer 1

 这里不能使用 Markdown。