Angular 6如何等待httpclient返回

Question

我正在尝试从 Angular 6 调用我的烧瓶界面上的一个函数。该函数应在单击时验证某些凭据并根据响应显示错误或导航到页面。

认为我似乎无法找到一种方法来等待响应，然后再执行下一行代码。这会导致需要按下按钮两次才能进行导航的错误。

我尝试使用asyc/await，尝试使用.then，尝试将subscribe 切换为map，但没有任何效果。

我想我遗漏了一些重要的东西。

onClick() {
    let data = {
        // some data
    }
    let response = this.login(data);
    if (response["valid"] === true) {
        this.router.navigate(['/cool_page']);
    }
}

login(data) {
    let login_data = {}
    this.httpClient.post('http://somedomain.com/login', JSON.stringify(data)).subscribe( response => {
        login_data = response;    
    });

    return login_data; //this remains empty
}

Answer 1

它需要与订阅相关的小修正。

onClick() {
    let data = {
        // some data
    }
     let response = this.login(data).subscribe( response => {
        if (response["valid"] === true) {
        this.router.navigate(['/cool_page']);
      }
    });

}

login(data) {
    let login_data = {}
    return this.httpClient.post('http://somedomain.com/login', JSON.stringify(data));
}