时间戳

首页 > 解决方案 > HttpClient post返回true，但组件订阅函数为false

angular - HttpClient post返回true，但组件订阅函数为false

问题描述

我正在尝试从按钮登录。我有带有双向绑定的模板输入字段来设置用户名和密码的字符串值。通过事件绑定，登录按钮触发 login() 方法。此登录方法创建一个本地 Credential 对象，该对象吸收用户名和密码。Credential 对象被传递给 HttpClient 服务方法。服务方法命中后端端点，并传回一个布尔值，指示凭据是否在数据库中。

在组件类中，服务方法被订阅，并且——正如我所解释的——在订阅期间，loginSuccess 布尔值被分配了服务方法返回的值。除了......我对此的理解一定是错误的，因为这并没有按照我期望的顺序发生。

登录组件.ts

export class LoginComponent implements OnInit, OnDestroy {
  // credential: Credential;
  username: string;
  password: string;
  user: User;
  loginMessage: string = "";
  loginSuccess: boolean = false;
  userSubscription: Subscription;

  constructor(private userService: UserService) { }

  ngOnInit(): void {
  }
  ngOnDestroy(): void {
    // this.userSubscription.unsubscribe();
  }

  login(): void {
    if(this.username != null){
      var credential: Credential = { username: this.username, password: this.password };
      
      this.userService.authenticateCredential(credential).subscribe(subscribeCheck => { 
        this.loginSuccess = subscribeCheck;
        console.log("mark 04: loginSuccess = " + this.loginSuccess);
      });
      console.log("mark 13: loginSuccess = " + this.loginSuccess);
    }
    console.log("mark 14: loginSuccess = " + this.loginSuccess);

    if(this.loginSuccess){
      console.log("mark 24");
      this.userService.getUser(credential).subscribe(subscriptionUser => {
        this.user = subscriptionUser;
      });
        this.loginMessage = "";
    } else {
      console.log("mark 25");
      this.loginMessage = "LOGIN FAILURE!!!";
    }
  }
}

在此处输入图像描述

控制台显示，因为执行顺序不是我期望的，所以登录失败。布尔变量 loginSuccess 在遇到 if() 条件时始终为 false，因为 if() 条件始终在 loginSuccess 由 HttpClient observable 分配之前执行。为什么会这样？我该如何解决？

标签： angularasynchronousrxjsobservablesubscription

解决方案

您的检查if(this.loginSuccess){应该在订阅内。你是对的，这里的顺序很重要。

export class LoginComponent implements OnInit, OnDestroy {
      // credential: Credential;
      username: string;
      password: string;
      user: User;
      loginMessage: string = "";
      loginSuccess: boolean = false;
      userSubscription: Subscription;
    
      constructor(private userService: UserService) { }
    
      ngOnInit(): void {
      }
      ngOnDestroy(): void {
        // this.userSubscription.unsubscribe();
      }
    
      login(): void {
        if(this.username != null){
          var credential: Credential = { username: this.username, password: this.password };
          
          this.userService.authenticateCredential(credential).subscribe(subscribeCheck => { 
            this.loginSuccess = subscribeCheck;
            if(this.loginSuccess){
               console.log("mark 24");
               this.userService.getUser(credential).subscribe(subscriptionUser => {
                  this.user = subscriptionUser;
               });
              this.loginMessage = "";
            } else {
               console.log("mark 25");
               this.loginMessage = "LOGIN FAILURE!!!";
            }
            console.log("mark 04: loginSuccess = " + this.loginSuccess);
          });
          console.log("mark 13: loginSuccess = " + this.loginSuccess);
        }
        console.log("mark 14: loginSuccess = " + this.loginSuccess);
    
        
      }
    }

推荐阅读