循环遍历嵌套的对象数组

Question

I'm having a hard time trying to loop over an array of nested objects using ng7

this is the data I have:

data = { 
    'title1': [
    {
      active: true, 
      id: 1 
    },
  {
      active: true, 
      id: 2 
    },
  {
      active: true, 
      id: 3 
    },
  {
      active: true, 
      id: 4 
    }],
  'title2': [
   {
      active: true, 
      id: 1 
    },
  {
      active: true, 
      id: 2 
    },
  {
      active: true, 
      id: 3 
    },
  {
      active: true, 
      id: 4 
    }]              
}

I need to print the titles eg 'title1' and the rest of the data should be shown nested, issue is, whenever I go for this approach, everything looks ok:

 <ul>
    <li *ngFor="let item of data| keyvalue">
        <p>{{ item.key }}</p> 
        <p *ngFor="let children of item.value | keyvalue" >
            {{ children.value.id}}
        </p>
    </li>
  </ul>

But whenever I switch my layout to an input checkbox like this:

       <ul>
        <li *ngFor="let item of data| keyvalue">
            <p>{{ item.key }}</p> 
            <label>
                <input type="checkbox" name="events" *ngFor="let children of item.value | keyvalue" />
                event item {{ children.value.id}}
            </label>
        </li>
      </ul>

I get the following error on the browser's console, and nothing renders:

ERROR TypeError: Cannot read property 'value' of undefined at Object.eval [as updateRenderer] on

{{ item.key }}

Any idea? I'm sure I'm missing something dumb,

Answer 1

Your children reference is not in scope when you reference it because the event item {{children.value.id}} string is not contained in the <input> element.

Define the loop on your <label> instead of your <input> element:

<ul>
  <li *ngFor="let item of data | keyvalue">
      <p>{{ item.key }}</p> 
      <label *ngFor="let children of item.value | keyvalue">
          <input type="checkbox" name="events" />
          event item {{children.value.id}}
      </label>
  </li>
</ul>