Зацикливание на вложенном массиве объектов - PullRequest
Новая
       17

Зацикливание на вложенном массиве объектов

0 голосов
/ 04 декабря 2018

Я с трудом пытаюсь перебрать массив вложенных объектов, используя ng7

Вот данные, которые у меня есть: 

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 
    }]              
}

Мне нужно напечатать заголовки, например:'title1' и остальные данные должны отображаться как вложенные, проблема в том, что всякий раз, когда я использую этот подход, все выглядит нормально: 

 <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>

Но всякий раз, когда я переключаю свой макет на флажок ввода, вот так:

       <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>

Я получаю следующую ошибку в консоли браузера, и ничего не отображается:

ОШИБКА TypeError: Невозможно прочитать свойство 'value' undefined в Object.eval [как updateRenderer] для

{{item.key}}

Есть идеи?Я уверен, что упускаю что-то немое,

1 Ответ

0 голосов
/ 04 декабря 2018

Ваша ссылка children не попадает в область действия, когда вы ссылаетесь на нее, потому что строка event item {{children.value.id}} не содержится в элементе <input>.

Определите цикл в <label> вместо вашего <input> элемент: 

<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>
...