Как перебрать «Объект, несущий массив», используя * ngFor в angular?

Question

Я пытаюсь выполнить итерацию по объекту, содержащему массив, но получаю сообщение об ошибке «Не удается найти другой поддерживающий объект« [объектный объект] »типа« объект ». NgFor поддерживает только привязку к итерируемым объектам, таким как массивы». Ниже мой ответ JSON:

data={"books": [{"title": "A","edition": 3,"year": 2011 },
{"title": "B","edition": 2,"year": 2009},
{"title": "C","edition": 2,"year": 2008}],
"count":3
}

код шаблона:

<tr *ngFor="let d of data">
<td>d.books.title</td>
</tr>

Кто-нибудь может подсказать, какие изменения необходимо внести для циклического прохождения данных?

Answer 1

Вам нужно использовать массив, то есть data.books

<tr *ngFor="let d of data.books">
<td>{{d.title}}</td> //edited after looking at comments
</tr>

Answer 2

In your .ts file is : Declare the data object
  data =
      {"books": 
      [
        {"title": "A","edition": 3,"year": 2011 },
        {"title": "B","edition": 2,"year": 2009},
        {"title": "C","edition": 2,"year": 2008}
      ],
        "count":3
      }

In your .html file:

<table>
    <tr *ngFor="let d of data.books">
     <td>{{d.title}}</td>
    </tr>
</table>

Я попробовал .. У меня это работает!