Angular *ngFor not reading nested data

Issue

I am trying to get angular to display some data.

Here is the data:

data = [
   {
      title: 'title1',
      data: [
         {
            id: 1,
            description: 'some description'
         },
         {
            id: 2,
            description: 'some other description'
         }
      ]
   },
   {
      title: 'title2',
      data: [
         {
            id: 1,
            description: 'some description'
         },
         {
            id: 2,
            description: 'some other description'
         }
       ]
    }
 ]

And here is the code I'm trying:

<div *ngFor="let item of data">
   <div>{{ item.title }}</div>
   <ul>
      <li>item.data.description</li>
   </ul>
</div>

The data.description's are not showing.

How can I get it to display all the data?

Solution

data is an array. You need a second *ngFor-block for the data.

  <div *ngFor="let item of data">
    <div>{{ item.title }}</div>
    <ul *ngFor="let itemsdata of item.data">
        <li>itemsdata.description</li>
    </ul>
  </div>

Answered By - akop