遍历 objects 的嵌套数组

Question

我很难尝试使用 ng7

遍历嵌套 objects 的数组

这是我的数据：

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>

我在浏览器的控制台上收到以下错误，但没有任何内容呈现：

错误类型错误：无法读取未定义的属性 'value' 在 Object.eval [作为 updateRenderer] 在

{{ item.key }}

有什么想法吗？我确定我错过了一些愚蠢的东西，

Answer 1

当您引用它时，您的 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>

遍历 objects 的嵌套数组

Loop over nested array of objects

javascript

arrays

object

ngfor

angular