Получение данных объекта json в HTML-интерфейс в Angular

Question

Я возвращаю объект массива JSON из внешнего API, который я хочу показать в представлении HTML на внешнем интерфейсе Angular. Но представление не загружается с ошибкой ниже

Вывод на консоль

Ошибка: «Невозможно найти отличающийся поддерживающий объект« [объект]] типа «объект». NgFor поддерживает только привязку к итерируемым объектам, таким как массивы ». ОШИБКА КОНТЕКСТА Объект {view: {…}, nodeIndex: 3, nodeDef: {…}, elDef: {…}, elView: {…}}

getGifs() {
this.getData().subscribe(data => {
  console.log(data);
  this.data = data;
})
}

В логах консоли я вижу результат как,

data: Array(25) [ {…}, {…}, {…}, … 
meta: Object { status: 200, msg: "OK", response_id:       "5cea7c49386968693259fc04" }
pagination: Object { total_count: 2447, count: 25, offset: 0 }
<prototype>: Object { … }

Как я могу прочитать эту переменную данных на моей странице HTML. Попытка итерации с помощью ngfor, но она не удалась.

Answer 1

Вы должны назначить свойство данных ответа для отображения в HTML,

this.data = data.data;

и отображать в HTML как

  <ul>
    <li *ngFor="let item of data">
       {{item.type}}. {{item.slug}}
    </li>
  </ul>

EDIT

this.getData().subscribe((data:any) => {
  console.log(data);
  this.data = data.data;
})