Angular数据同步问题

Question

如果输入的某些电子邮件地址已经存在，我想从后端检索信息。基于此信息，我正在调用一个函数，该函数生成 post 将用户插入数据库。问题是只有在第二次单击我的“注册”按钮后才会插入用户（在此按钮上调用函数 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() 的呼叫是 asynchronous。所以当你在 this.checkEmailStatus() 调用之后检查 if (this.signupForm.valid === true && this.emailStatus) 时，变量 this.emailStatus 仍然是未定义的。要修复它，您可以 return 从组件中的 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();
}

Angular数据同步问题

Angular data synchronization issue

javascript

c#

synchronization

typescript

angular