[英]HttpClient post returns true, but component subscribe function is false
我正在尝试从按钮登录。 我有带有双向绑定的模板输入字段来设置用户名和密码的字符串值。 通过事件绑定,登录按钮触发 login() 方法。 此登录方法创建一个本地凭据 object,它吸收了用户名和密码。 凭证 object 被传递给 HttpClient 服务方法。 服务方法命中后端端点,并传回 boolean,指示凭据是否在数据库中。
在组件 class 中,订阅了服务方法,并且 - 正如我解释的那样 - 在订阅期间, loginSuccess boolean 被分配了服务方法返回的值。 除了......我对此的理解一定是错误的,因为这并没有按照我期望的顺序发生。
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!!!";
}
}
}
控制台显示,因为执行顺序不是我期望的,所以登录失败。 boolean 变量 loginSuccess 在遇到 if() 条件时始终为 false,因为 if() 条件始终在 loginSuccess 由 HttpClient observable 分配之前执行。 为什么会这样? 我该如何解决?
您对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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.