Angular 6 — наблюдаемая подписка остается неразрешенной до окончания события

У меня есть файл HTML, из которого я вызвал свою функцию отправки из тега формы,

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

Да, у меня есть полная форма со всеми обязательными полями и кнопкой отправки.

Далее, в моем угловом файле моя функция такова:

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 возвращает правильное значение, но не в нужное время. При отладке ожидаемое возвращаемое значение pass.reg_password оставалось неопределенным, но как только я нажимаю кнопку «Продолжить» в отладчике, событие завершается, и pass.reg_password имеет правильное ожидаемое значение.

Как разрешить в angular 6, я использую HttpClientModule, Net WebAPI, базу данных SQL, а также я отлаживал свой веб-API, он возвращает правильное значение.

Когда я проверил вкладку сети в инструментах разработчика Chrome, она показала ожидание во время отладки, но нормально 200, когда событие закончилось.


angular observable resolve
person Abhishek Jaiswal    schedule 22.06.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

ваша проверка выполняется до того, как ваша подписка будет разрешена, вы должны выполнить проверку значения формы в обратном вызове 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().

person Taranjit Kang    schedule 22.06.2018
comment
Да, сэр, это решило мою проблему. Но только из любопытства я узнал, что раньше для такой проблемы существовало разрешение(). Можно ли его еще как-то использовать, чтобы я мог отправлять полученные данные куда-то еще, а не просто сравнивать в своем блоке if. - person Abhishek Jaiswal; 22.06.2018
comment
вызывая метод внутри subscribe обратного вызова .subscribe(value=>this.myMethod(value)) - person Vikas; 22.06.2018
comment
resolve() работает с promises, рекомендуется использовать observables вместо promises. Посмотрите это - person Vikas; 22.06.2018