Angular 6 - 可观察订阅在事件结束前仍未解决

Question

我有 HTML 文件，我从那里调用了表单标签的提交功能，

<form [formGroup]="loginform" (ngSubmit)="loginUser(loginform)">

是的，我有一个包含所有必填字段和提交按钮的完整表格。

接下来，在我的 angular 文件中，我的函数是，

loginUser(form: FormGroup){
    let pass: DbModel = {
      reg_username: '',
      reg_email: '',
      reg_fullname: '',
      reg_dob: '',
      reg_gender: '',
      reg_password: ''
    };
    this.storageService.login(form).subscribe(data => pass = data);
    if(form.value.reg_password === pass.reg_password)
      console.log("Logged In...");
    else
      console.log("Wrong Credentials...");   }

那么，我的服务文件是，

login(form: FormGroup): Observable<DbModel>{
return this.http.get<DbModel>('http://localhost:53685/api/users/'+form.value.reg_username);

}

现在，这个 API 调用是 returning 正确的值，但不是在正确的时间。当我调试时，我得到 pass.reg_password 的预期 return 值保持未定义，但只要我点击调试器中的继续按钮，事件就会完成并且 pass.reg_password 具有正确的预期值。

如何在angular中解决 6，我正在使用HttpClientModule，Net WebAPI，SQL数据库，并且我调试了我的网站api，这是 return 正确的值。

当我在 chrome 开发人员工具中检查网络选项卡时，它在调试时显示挂起，但在事件结束时正常显示 200。

Answer 1

您的验证在您的订阅解决之前执行您应该在 subscribe 回调中进行表单值检查。

this.storageService.login(form).subscribe(data => {
    if(form.value.reg_password === data.reg_password)
      console.log("Logged In...");
    else
      console.log("Wrong Credentials...");
});

关键在于这一行：

return this.http.get<DbModel>'http://localhost:53685/api/users/'+form.value.reg_username);

http.get(...) 是异步的，因此您需要在 subscribe() 回调内部处理响应。

Angular 6 - 可观察订阅在事件结束前仍未解决

Angular 6 - Observable Subscription remains Unresolved till the Event ends

angular

observable

resolve