HttpClient post returns true,但组件订阅功能为false
HttpClient post returns true, but component subscribe function is false
我正在尝试通过按钮登录。我有带有双向绑定的模板输入字段来设置用户名和密码的字符串值。通过事件绑定,登录按钮触发 login() 方法。此登录方法创建一个吸收用户名和密码的本地 Credential 对象。 Credential 对象被传递给 HttpClient 服务方法。服务方法命中后端端点,并返回一个布尔值,指示凭据是否在数据库中。
在组件 class 中,订阅了服务方法,并且 - 正如我所解释的那样 - 在订阅期间,loginSuccess 布尔值被分配给服务方法 returns 的值。除了...我对此的理解一定是错误的,因为这不是按照我期望的顺序发生的。
login.component.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() 条件总是在 HttpClient 可观察对象分配 loginSuccess 之前执行。为什么会这样?我该如何解决?
您对 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);
}
}
我正在尝试通过按钮登录。我有带有双向绑定的模板输入字段来设置用户名和密码的字符串值。通过事件绑定,登录按钮触发 login() 方法。此登录方法创建一个吸收用户名和密码的本地 Credential 对象。 Credential 对象被传递给 HttpClient 服务方法。服务方法命中后端端点,并返回一个布尔值,指示凭据是否在数据库中。
在组件 class 中,订阅了服务方法,并且 - 正如我所解释的那样 - 在订阅期间,loginSuccess 布尔值被分配给服务方法 returns 的值。除了...我对此的理解一定是错误的,因为这不是按照我期望的顺序发生的。
login.component.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() 条件总是在 HttpClient 可观察对象分配 loginSuccess 之前执行。为什么会这样?我该如何解决?
您对 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);
}
}