Angular проблема синхронизации данных

Question

Я хотел получить информацию из бэкэнда, если какой-либо адрес электронной почты от ввода уже существует. Основываясь на этой информации, я вызываю функцию, которая создает сообщение, которое вставляет пользователя в базу данных. Проблема в том, что пользователь вставляется только после второго нажатия на мою кнопку SignUp (на этой кнопке вызывается функция registerUser).

Комплектующие:

 registerUser(form: NgForm) {
    let date: Date = new Date();
    this.newUser.registrationDate = date;
    this.checkEmailStatus();  //IMPLEMENTATION BELOW
      if (this.signupForm.valid === true && this.emailStatus) {
      this.portfolioAppService.registerUser(this.newUser).subscribe((data) => {
        this.clearFields();
        this.navigateToLogin();
      },
        error => console.error(error)
      );
    }
  }

  checkEmailStatus() {
    this.portfolioAppService.checkEmailStatus(this.newUser.email).subscribe((data: string) => {
      if (data != "") {
        this.emailStatus = true;
      }
      else this.emailStatus = false;
    },
      error => console.error(error)
    );
  }

Вот мой сервис:

  checkEmailStatus(email: string): Observable<string> {
    return this.http.get<string>(`/api/Users/CheckEmailStatus_${email}`, this.httpOptions);
  }

Вот серверная часть:

    [HttpGet]
    [Route("~/api/Users/CheckEmailStatus_{email}")]
    public string CheckEmailStatus(string email)
    {
        try
        {
            User user = _context.Users.Where(u => u.Email == email).FirstOrDefault();
            if (user != null)
            {
                return user.Email;
            }
            else
            {
                return "";
            }

        }
        catch (Exception e)
        {
            throw new Exception("Error!");
        }

    }

Answer 1

Вызов this.portfolioAppService.checkEmailStatus() является асинхронным . Поэтому, когда вы проверяете if (this.signupForm.valid === true && this.emailStatus) после вызова this.checkEmailStatus(), переменная this.emailStatus все еще не определена. Чтобы исправить это, вы можете вернуть наблюдаемое из checkEmailStatus() в компоненте. Попробуйте следующее

Компонент

registerUser(form: NgForm) {
  let date: Date = new Date();
  this.newUser.registrationDate = date;
  this.checkEmailStatus().pipe(take(1)).subscribe(status => {
    if (this.signupForm.valid === true && status) {  // <-- check the status of email address
      this.portfolioAppService.registerUser(this.newUser).subscribe((data) => {
        this.clearFields();
        this.navigateToLogin();
      },
        error => console.error(error)
      );
    }
  });
}

checkEmailStatus() : Observable<boolean> {
  const result = new Subject<boolean>();

  this.portfolioAppService.checkEmailStatus(this.newUser.email).subscribe(
    (data: string) => {
      if (data !== '') {
        result.next(true);
      }
      else result.next(false);
    },
    error => { 
      console.error(error);
      result.next(false);
    }
  );

  return result.asObservable();
}