Question

我很难尝试使用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：无法读取未定义的属性“值” 在

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

循环遍历嵌套的对象数组

1 个答案: