首页 文章

Angular 6 HttpClient问题，用于映射API调用的响应

提问于
浏览 次
0

我需要一个关于Angular 6 HttpClient的小帮助 . 我对REST API调用的响应有疑问 . 我正在使用HttpClient . 我有一个函数，它获取所有用户的列表（在我的情况下，我称之为潜在客户） .

fetchLeadsList(){
  return this.http.get('http://localhost:3000/api/leads')
  .pipe(
    map(data => {
      console.log(data);
      return data;          
    })
  )
}

在我的组件的OnInit中，我将此 endpoints 称为：

this.leadsService.fetchLeadsList()
    .subscribe(response => {
      console.log(response, 'leadsList');
      this.leadsList = response.data; // leadList is declared as an empty array
  })

我正在获取潜在客户列表：
enter image description here

但是，当我尝试映射上面组件中提到的服务响应时（this.leadsList = response.data），我得到一个错误：

ERROR TS2339：“对象”类型中不存在属性“数据” .

既然如图所示有数据属性，它怎么会给我一个错误？

而且我也可以在视图中显示列表！有什么我想念的吗？

angular angular6 angular-httpclient

3 回答

  • 0

    您需要告诉编译器 response 具有哪种类型 . 您可以为它创建一个类型，或者只是将其设置为 any 以让编译器传递您的代码

    this.leadsService.fetchLeadsList()
    .subscribe((response: any) => {
      console.log(response, 'leadsList');
      this.leadsList = response.data; // leadList is declared as an empty array
})
    回复于
  • 0

    HttpClient.get（）方法将JSON服务器响应解析为匿名对象类型 . 它不知道该物体的形状是什么 .

    您可以指定要将结果转换为哪个模型：

    fetchLeadsList() {
    return this.http.get<{ data: any[] }>('http://localhost:3000/api/leads')
                         ^^^^^^^^^^^^^

    也可以看看：

    回复于
  • 3

    尝试访问像 response['data'] 希望这将解决您的问题

    快乐编码:)

    回复于

相关问题