【问题标题】：Angular 7 Http Get returning '[object Object]'Angular 7 Http Get 返回'[object Object]'
【发布时间】：2019-03-30 02:13:15
【问题描述】：

我有一个服务调用具有以下功能的 API：

getAll(): Observable<Client[]> {
    return this.http.get<Client[]>(`${this.url}/clients`) 
}

在我的组件中，服务调用：

  getClients() {
      this.clientService.getAll().subscribe(
      res => {
         this.clients = res;
         console.log(this.clients);
      },
      err => {
        console.log(err);
      }
);}

有了这个，我得到了一个对象的响应对象。我的 API 返回一个对象数组，但 Observable 函数以某种方式将数据转换为具有数字索引的对象对象： Console img with error

谁知道问题出在哪里？

解决方案：

使用 KeyValue Pipe 是一种解决方法，就像 @Suryan 评论的那样。问题是我的 API 中的排序方法，它将数组更改为对象。服务中不需要使用管道或映射，也不需要使用管道键值。 @Suryan make an example demonstrating this point.

【问题讨论】：

你在使用 HttpClient 吗？如果没有，那么你需要res.data
从 '@angular/common/http' 导入 { HttpClientModule };
是的，我使用的是 HttpCliente。使用 res.data 我收到以下错误：错误 TS2339：“客户端 []”类型上不存在属性“数据”。
尝试查看网络选项卡，您是否得到了正确的响应，如您所说的“我的 Api 正在返回一个对象数组”
@Suryan 我的 API 返回是正确的。问题出在 Angular 中。使用 Angular 6 版本请求 API 工作正常。只有当我更新 7 的 Angular 版本时才会出现问题。

标签： angular http observable angular7

【解决方案1】：

使用 KeyValue Pipe 会解决问题

<div *ngFor="let item of clients | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

【讨论】：

男人！你是救命稻草，呵呵，它就像一个魅力！谢谢！
@ThiagoReis 但问题仍然存在，正如您所说“我的 Api 正在返回一个对象数组”

【解决方案2】：

试试这个：

this.clients = res.data;

【讨论】：

使用 res.data 我收到以下错误：错误 TS2339：属性 'data' 在类型 'Client[]' 上不存在。

【解决方案3】：

尝试在您的 .service.ts 文件中进行以下更改

getAll(): Observable<Client[]> {
    return this.http.get<Client[]>(`${this.url}/clients`).map(res=>res.json()); 
}

【讨论】：

HttpClient.get() 自动应用 res.json() 并返回 Observable>。您不再需要自己调用此函数。