如何等待带有角度的http响应？

Question

Got a component (login) which call threw a service my controller. The controller return a false if the login fail or the email of the user if it works. My front call the service when i click on a button which execute the function OnSubmit(). In this method i would like to redirect the user on a page if the login succes, or wirte a message is there is a problem.

My problem is that my service manage to login, but since the http request of the service is async, my front doesn't wait the response and the value of this.Email is "undefined".

what should i do for wait the http response (in my component or in my service)?

Here is my function OnSubmit():

  onSubmit() {
    var user = {
      'Email': this.userForm.Email,
      'Password': this.userForm.Password,
    }
    this.authService.login(user).subscribe(result => {
      this.Email = result.value;
      console.log("connected with :" + this.Email);
    });

    if (this.Email == false) {
      this.Message = "wrong login or password."
    }
    else {
      this.router.navigateByUrl("dashboard");
    }   
  }

My service:

  login(user: any): Observable<any> {
    return this.http.post<any>(this.baseUrl + '/login', user, httpOptions);
  }

And my controller:

[HttpPost("/login")]
public async Task<IActionResult> Login([FromBody] LoginVM loginVM)
{
    if (ModelState.IsValid)
    {
        var result = await _signInManager.PasswordSignInAsync(
            loginVM.Email,
            loginVM.Password,
            loginVM.RememberMe,
            false
        );
        if (result.Succeeded)
        {
            return Ok(Json(loginVM.Email));
        }
        else
        {
            return Ok(Json(false));
        }
    }
    return Ok(Json(false));
}

Thanks a lot for your answers:)

Answer 1

Instead of trying to force it to be synchronous, move the check of the result inside the "success" handler in the subscription, right after you assign the result to this.Email

Answer 2

You can also convert the observable to a Promise on the onSubmit() method (making it async) and use await:

let result = await this.authService.login(user).toPromise();
this.Email = result.value;
console.log("connected with :" + this.Email);
if (this.Email == false) {
  this.Message = "wrong login or password."
}
else {
  this.router.navigateByUrl("dashboard");
}