Angular - Obeservable无法正常工作

Question

我有以下代码无法正常工作.

我有一项服务,为用户提供注册.

register(firstname: string, lastname: string, email: string, password: string): Observable<boolean> {
    let body = {firstname: firstname, lastname: lastname, email: email, password: password};

    this.http.post(this.base_url + "api/register/user/", body)
    .subscribe(
        (data) => {
            if((data as any).status == 'success') {
                return Observable.of(true);
            }
        },
        (error) => {
           return Observable.of(false);
    });
    return Observable.of(false);
  }

注册方法工作正常,因为我注册用户的API返回"成功".问题是当我调用它时如下:

registerUser(e) {

    ...

    let isRegistered = false;

    this.userService.register(firstname, lastname, email, password).subscribe(register => isRegistered = register);


    if(isRegistered) {
        console.log("isRegistered = true");
        this.router.navigate(['/home']);
        return true;
    } else {
        console.log("isRegistered = false");
        return false;
    }
  }

我也在导入必要的模块:

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

"isRegister"保持为false,因此页面不会重定向到主页.

有没有人知道问题出在哪里？

先感谢您!

Answer 1

该isRegistered值始终是false因为您正在处理异步操作,如同步操作.基本上,检查if (isRegistered)将在您从服务中获取值之前运行.为了避免这种情况,您必须在订阅成功回调中移动检查:

this.userService
  .register(firstname, lastname, email, password)
  .subscribe(isRegistered => {
    if (isRegistered) {
      this.router.navigate(["/home"]);
      return true;
    } else {
      return false;
    }
  });

通过这种方式,您将确保isRegistered服务调用的结果已设置了该值.

你的register()功能也有一个缺陷-你总是会返回Observable的false.您可能希望返回HTTP请求的结果.您应该在使用服务时.map()获得对HTTP的响应Boolean和订阅的结果.

register(firstname: string, lastname: string, email: string, password: string): Observable<boolean> {
  const body = { firstname, lastname, email, password };

  return this.http.post(this.base_url + 'api/register/user/', body)
    .map(data => {
        if((data as any).status === 'success') {
            return Observable.of(true);
        } else {
            return Observable.of(false);
        }
    })
    .catch(() => Observable.of(false));
}