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：类型“对象”上不存在属性“数据”。

既然有图像中所示的数据属性，它为什么给我一个错误？

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

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'] 一样访问，希望这可以解决您的问题

快乐编码：）

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

3 个答案: