[英]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.