Angular 5 HttpClient 在获得值之前返回

Question

我开始使用 Angular，我有一个非常简单的问题。

我正在使用 this我通过 ngx-rocket 工具创建的启动项目，我正在尝试使用我的 webapi 实现身份验证。我说的是这项服务 ( see original code )。

作为 Http 模块，我正在使用新模块(import { HttpClient } from '@angular/common/http';)。我将上面服务的 login 方法更改为:

  login(context: LoginContext): Observable<Credentials> {

    return  this._http.post<Credentials>("/api/account/login", 
      {Email : context.username,Password:context.password});        
  }

http请求发生并成功返回。我的问题:如您所见，我还应该使用 this.setCredentials(data, context.remember); 设置凭据。让我感到困惑的是如何返回可观察对象并以相同的方法设置凭据？我尝试将返回的 observable 保存在一个变量中，订阅它，设置数据然后返回，但它在设置数据之前返回(我知道它是异步的)。

这就是让我感到困惑的地方，它对 Angular 来说非常基础，但仍然让我感到困惑。我如何更改此方法以提供正确的返回并设置凭据？

感谢您的帮助

Answer 1

尝试使用管道

login(context: LoginContext): Observable<Credentials> {
    return this._http.post<Credentials>("/api/account/login", {Email : context.username,Password:context.password})
                .pipe(
                    tap(data => {
                        this.setCredentials(data, context.remember);
                    })
                );
}