Angular 6 HttpClient 响应返回未定义答案

【问题标题】：Angular 6 HttpClient response is returning UndefinedAngular 6 HttpClient 响应返回未定义
【发布时间】：2018-07-16 05:43:20
【问题描述】：

我创建了这个 auth-api.ts 服务，有一个登录方法：

login(username, password)
  {
    let headerOptions = new HttpHeaders();
    headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');


    const httpParams = new HttpParams()
      .set('username', username)
      .set('password', password);

    return this.http.post('http://dev.local/scripts/login.php', httpParams,  {
      headers: headerOptions
    }).pipe(map(
        res=>{
          console.log('user '+res)
        },
        err=>
          console.log(err)
      ))
  }

单击按钮时，将在 login.component.ts 中使用此方法调用此方法：

login(){
    const user = this.loginGroup.get('username').value;
    const pass = this.loginGroup.get('password').value;

    this.auth.login(user, pass).subscribe(
      (data)=>{
        console.log(data);
        this.loginGroup.reset();
      },
      (error)=>{
        console.log(error)
      }
    )
  }

问题是来自 api 登录方法的 console.log(res) 正在返回值，但来自第二个登录方法的 `console.log(data) 正在返回 undefined。

我想要对data做一些条件，所以我不能。

【问题讨论】：

如果您在 chrome 中按 f12 并输入 console.log(console.log("anything here")) 您将看到相同的行为。我怀疑这是因为在这种情况下您的数据实际上是 console.log()。
那么如何才能真正得到原始值

标签： angular httpclient angular6

【解决方案1】：

如果您想在控制台中返回并记录结果，请使用 tap 运算符而不是 map

return this.http.post('http://dev.local/scripts/login.php', httpParams,  {
  headers: headerOptions
}).pipe(tap(
    res=>{
      console.log('user '+res)
    },
    err=>
      console.log(err)
  ))

【讨论】：

【解决方案2】：

移除管道。您正在将您的响应映射到 console.log() 这就是您在组件中未定义的原因。

您还可以处理来自组件的错误。

login(username, password)
  {
    let headerOptions = new HttpHeaders();
    headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');


const httpParams = new HttpParams()
  .set('username', username)
  .set('password', password);

return this.http.post('http://dev.local/scripts/login.php', httpParams,  {
  headers: headerOptions
});
}

简单来说，Pipe 用于转换您的输出。这里 map 运算符将您的响应映射到方法或某个表达式以获取所需的输入。如果假设您的响应返回 2，那么如果我这样做，

map(response => response * 2),

您的组件将在 subscribe 方法中获取数据为 4。我建议你谷歌了解更多信息。

【讨论】：

谢谢。有效。你能解释一下在这种情况下管道和地图的作用吗？我总是使用它们，但不太了解它们。
在回答中添加了解释

【解决方案3】：

**try this**

let headers = new Headers();
    headers.set('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.post('http://dev.local/scripts/login.php',httpParams,  { headers: this.headers }).toPromise();

【讨论】：