Angular:数据仅在订阅方法中可用，但在外部不可用

Question

将数据从 http 请求传递到另一个组件的最佳方法是什么。我在这里编写了一个用户服务，它接收有关用户的信息。现在我想在我的登录组件中检索它。当我将用户对象输出到控制台时，console.log(this.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;
    }
}

登录.组件.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;
    });
  }