Angular httpClient 返回属性在对象上不存在答案

【问题标题】：Angular httpClient returns property does not exist on objectAngular httpClient 返回属性在对象上不存在
【发布时间】：2017-11-02 12:20:43
【问题描述】：

  constructor(private http: HttpClient) {
  }
  ngOnInit() {
   this.http.get('url').subscribe(data => {
     console.log(data);
     console.log(data.login);
   });
  }
}

在这里，我可以在控制台中使用登录名查看数据，但我收到一条错误消息，指出数据上不存在属性登录名。有没有不使用界面的解决方法？因为我想要获取的数据非常庞大，以后可能会修改，那么有没有更好的方法呢？

【问题讨论】：

能把console.log(data)打印的值加起来吗？

标签： angular angular4-httpclient

【解决方案1】：

使用HttpClient时的docs状态...

 this.http.get('/api/items').subscribe(data => {
   // Read the result field from the JSON response.
   this.results = data['results'];
 });
在上面的示例中，data['results'] 字段访问很突出，因为您使用括号表示法来访问结果字段。如果您尝试编写 data.results，TypeScript 会正确地抱怨从 HTTP 返回的对象没有 results 属性。这是因为HttpClient 将 JSON 响应解析为一个对象，但它不知道该对象是什么形状。

因此，您的选择是输入您的回复（我和文档都建议这样做），或者使用括号表示法。

键入响应将创建一个接口/类，您告诉它这是您对请求的期望：

export interface MyResponse {
  results: // your type here
}

this.http.get<MyResponse>('/api/items').subscribe(data => {
   this.results = data.results;
 });

【讨论】：