Angular 6 HttpClient 问题与映射来自 API 调用的响应

Question

我需要一些关于 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 中，我将此端点称为：

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

我得到的线索列表如下：

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

错误 TS2339：“对象”类型上不存在属性“数据”。

既然有如图所示的data属性，怎么会报错呢？

而且我还可以在视图中显示列表！有什么我遗漏的吗？

Answer 1

你需要告诉编译器response 有什么类型。您可以为它创建一个类型或将其设置为 any 以让编译器传递您的代码

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

Answer 2

HttpClient.get() 方法将 JSON 服务器响应解析为匿名 Object 类型。它不知道那个物体的形状是什么。

您可以指定要将结果投射到哪个模型：

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

另见：

• https://angular.io/guide/http#type-checking-the-response

Answer 3

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

快乐编码:)