angular - 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)
      }
    )
  }

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

我想要的是在 上设置一些条件data，所以我不能。

标签： angularhttpclientangular6

Answer 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)
  ))