Angular HttpClient post返回true,但组件订阅函数为false

Angular HttpClient post返回true,但组件订阅函数为false,angular,asynchronous,rxjs,observable,subscription,Angular,Asynchronous,Rxjs,Observable,Subscription,我正在尝试通过按钮登录。我有双向绑定的模板输入字段来设置用户名和密码的字符串值。通过事件绑定,login按钮触发login()方法。此登录方法创建一个本地凭据对象,该对象吸收用户名和密码。凭证对象被传递到HttpClient服务方法。服务方法命中后端端点,并传回一个布尔值,该值指示凭据是否在数据库中 在component类中,服务方法被订阅,并且——正如我所解释的那样——在订阅期间,loginsAccess布尔值被分配给服务方法返回的值。除了我对这一点的理解肯定是错误的,因为这并没有按照我预期的

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

在component类中,服务方法被订阅,并且——正如我所解释的那样——在订阅期间,loginsAccess布尔值被分配给服务方法返回的值。除了我对这一点的理解肯定是错误的,因为这并没有按照我预期的顺序发生

login.component.ts

控制台显示,由于执行顺序与我预期的不同,因此登录失败。布尔变量loginsucess在遇到if()条件时始终为false,因为if()条件总是在HttpClient observable分配loginsucess之前执行。为什么会发生这种情况?如何修复它?

如果(this.loginsucess){应该在订阅中,请检查
。
你说得对,这里的秩序很重要

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);
    
        
      }
    }

如果您允许的话,还有一个问题:我需要使用此代码取消订阅吗?@JackJ我相信在Angular中默认情况下所有http订阅都已取消订阅。有关详细信息,请参阅此答案:
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);
    
        
      }
    }