Angular 4 Http Post将响应放在了对象中

Question

我正在使用Angular 4和Asp.net web api。我不知道如何阅读我回复的属性。

我的回复看起来像

我的帖子请求：

  postLogin(values: string): Observable<string> {
    let body = "username=test@test.test&password=Test1234!&grant_type=password";
    /*let body = values + "&grant_type=password";*/
    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({headers: headers});

    return this._http.post(this._postLoginUrl, body, options)
      .catch(this.handleError);
  }

我实际上打电话给post方法：

this._loginService.postLogin(value)
        .subscribe(
          data => console.log(data),
          err => console.log(err));

这确实有效，我确实在我的控制台

中得到了回复

但我怎样才能阅读我的财产？

更新

我已经更新了我的代码，但它仍然没有像我想的那样工作，我确实阅读了文档，但我仍然无法进一步。

我对post方法的新调用：

console.log("username=" + this.username + "&password=" + this.password);
  this._loginService.postLogin("username=" + this.username + "&password=" + this.password)
    .subscribe(
      user => this.user = user),
      err => console.log(err);

我的新帖子请求：

  postLogin(values: string): Observable<User> {
    let body = values + "&grant_type=password";
    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({headers: headers});

    return this._http.post(this._postLoginUrl, body, options)
      .map(this.extractData)
      .catch(this.handleError);
  }

使用extractData函数

  private extractData(res: Response) {
    let body = res.json();
    return body.fields || {};
  }

如果我现在执行我的用户对象的控制台日志，我会得到未定义的，如果我尝试访问用户的属性，我的浏览器会开始刷新。我做错了什么，为什么我不能访问我的数据？

Answer 1

使用

JSON.parse(data._body)

这将为您提供响应对象。

Answer 2

从您的回复中可以看出，

{"access_token":"blaablaa", .... }

您的数据中没有任何fields，但“只是”具有属性的对象。由于没有fields，因此您应该只返回实际响应：

private extractData(res: Response) {
  let body = res.json();
  return body || {}; // remove 'fields'
}

当您收到数据时，您可以轻松访问字段

this._loginService.postLogin(value)
    .subscribe(data => {
       console.log(data.access_token) // your access_token
    })