Angular 6 HttpClient 响应返回未定义

Question

我创建了这个 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) 返回未定义。

我想在data上提出一些条件，所以我不能。

Answer 1

移除管道。您正在将您的响应映射到 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 用于转换您的输出。这里的映射运算符将您的响应映射到一个方法或一些表达式以获得所需的输入。如果假设你的回答是returns 2，那么如果我回答，

map(response => response * 2),

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

Answer 2

**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();

Answer 3

如果您想 return 并在控制台中记录结果，请使用 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)
  ))

Angular 6 HttpClient 响应返回未定义

Angular 6 HttpClient response is returning Undefined

httpclient

angular

angular6