Angular 7 Http Get return '[object Object]'

Question

У меня есть служба, которая вызывает 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 преобразует данные в объект объектов с числовыми индексами: Консоль img с ошибкой

Кто-нибудь знает, в чем проблема?

Решение:

Использование KeyValue Pipe - это обходной путь, подобный комментарию @Suryan.Проблема была в методе сортировки в моем API, который превратил массив в объект.Нет необходимости использовать трубу или карту в сервисе, также не обязательно использовать значение ключа трубы.@Suryan сделайте пример, демонстрирующий эту точку .

Answer 1

Попробуйте внести следующие изменения в файл .service.ts

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

Answer 2

Использование KeyValue Pipe решит проблему

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

Answer 3

Попробуйте это:

this.clients = res.data;