无法将可观察数据分配给 angular 中的局部变量

Question

我的服务

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
import { HttpClient,HttpParams } from '@angular/common/http';

@Injectable()
export class UserService {

  constructor(private http: HttpClient) { }
  isAdmin;
  getLogIn(email:string,password:string):Observable<boolean>{
    let params = new HttpParams().set("userEmail",email).set("userPassword", password);
    return this.http.get<boolean>("http://localhost:8080/user/login",{params: params});
     }
}

我的订阅电话

 email:string="";
  password:string="";
  adminFlag:boolean=false;

  login(event: any) {
    console.log(this.adminFlag);
    this.userService.getLogIn(this.email,this.password).subscribe(data => this.adminFlag=(data));
    console.log(this.adminFlag);
    if(this.adminFlag){
      console.log("INSIDE IF")
        this.router.navigate("../../home");
    }
  }

当我在控制台中登录 data var 时，我得到的原始数据为

true

但我无法将它分配给这个布尔值“adminFlag”它已更改为未定义

我错过了什么......？

API 返回一个布尔值......我需要分配那个布尔值......

Answer 1

HTTP GET是一个异步请求。 这意味着您在设置变量adminFlag之前正在读取它。 在回调中移动路由以设置值并使用它。 在 HTTP 请求中包含错误回调也是一种很好的做法。 这应该有效：

login(event: any) {
  this.userService.getLogIn(this.email,this.password).subscribe(
    data => {
      this.adminFlag = data; 
      if (data) {
        this.router.navigate("../../home");
      }
    },
    error => {
      console.error('getLogIn failed');
      // handle error...
    }
  );
}

Answer 2

执行时：

    this.userService.getLogIn(this.email,this.password).subscribe(data => this.adminFlag=(data));

这意味着您希望 DATA 是一个布尔值。 它是一个可观察的布尔值。 要获得真正的布尔值，请使用管道函数，例如：

getLogIn(email:string,password:string):boolean{
  let params = new HttpParams().set("userEmail",email).set("userPassword", password);
  return this.http
    .get<boolean>("http://localhost:8080/user/login",{params: params})
    .pipe(map(data => data);
}