Angular: 数据只在subscribe方法中可用，外部不可用

Question

将数据从 http 请求传递到另一个组件的最佳方式是什么。我在这里编写了一个用户服务，它接收有关用户的信息。现在我想在我的登录组件中检索它。当我将用户对象输出到控制台时，console.log(this.user) returns 未定义。为什么会这样，我该如何解决这个问题？

user.service.ts

@Injectable({ providedIn: 'root' })
export class UserService {
    user: User;

    constructor(private http: HttpClient) {}

    fetchUserByUsername(username: string){
        this.http
        .get<User>('http://localhost:8080/user/getByUsername?username=' + username)
        .subscribe(data => {
            this.user = data;
        });
        return this.user;
    }
}

login.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers:[UserService]
})
export class LoginComponent {
  hide = true;
  user: User;

  constructor(private userService: UserService) { }

  validate() {
    this.user = this.userService.fetchUserByUsername('bonguen');
    console.log(this.user)
  }
}

Answer 1

未定义的是你正在进行异步操作，要解决你可以在你的组件中这样做，

将您的服务方式更改为，

fetchUserByUsername(username:string){
    return this.http.get<User>(`http://localhost:8080/user/getByUsername?username='+username`)
}

在组件中，

 validate() {
     this.http.fetchUserByUsername('bonguen')
    .subscribe(data => {
        this.user = data;
    });
  }

Answer 2

您应该始终 return 来自您服务的 Observable 或 Promise。您不应该将数据保存在服务中

@Injectable({ providedIn: 'root' })
export class UserService {
    
    constructor(private http:HttpClient) {}

    fetchUserByUsername(username:string) {
      return this.http.get<User>('http://localhost:8080/user/getByUsername', { queryParams: { username } });
    }
}

在组件中

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  hide = true;
  user:User;

  constructor(private userService: UserService) { }

  validate() {
    this.userService.fetchUserByUsername('bonguen').subscribe(user => {
      this.user = user;
      console.log(this.user);
    }
  }
}

Answer 3

api 调用是异步的，因此 return this.user; 在 API 完成加载之前被调用，这就是您得到未定义值的原因。为了解决这个问题，所以登录组件的订阅就像

  validate() {
this.userService.fetchUserByUsername('bonguen').subscribe((res)=>{
  console.log(res , 'user')
})

这是一个工作示例 https://stackblitz.com/edit/angular-service-h6x2bp?file=app%2Flogin%2Flogin.component.ts

Angular: 数据只在subscribe方法中可用，外部不可用

Angular: data only available in subscribe method, but not outside

observable

rxjs

angular