0

我正在尝试将树状结构化 JSON 显示到带有角度的复选框的嵌套列表中。

风景

我在模板中使用递归来列出所有树的节点。如果父节点复选框被选中，我无法实现的功能仅显示子节点。我知道这可以使用 jquery 来完成，但有些事情告诉我混合 angular 和 jquery 不是一个好主意，或者 angular 已经有了我不知道的工具。数据和模板文件如下所示：

    {
      id: 0,
      title: 'Node 0',
      children: [
        {
          id: 1,
          title: 'Node 00',
          children: [
            {
              id: 11,
              title: 'Node 01'
            },
            {
              id: 12,
              title: 'Node 02'
            }
          ]
        },
        {
          id: 2,
          title: 'Node 1',
          children: [
            {
              id: 21,
              title: 'Node 10'
            },
            {
              id: 22,
              title: 'Node 11'
            }
          ]
        },
        {
          id: 3,
          title: 'Node 2',
          children: [
            {
              id: 31,
              title: 'Node 20'
            },
            {
              id: 32,
              title: 'Node 21'
            },
            {
              id: 32,
              title: 'Node 22',
              children: [
                { id: 321, title: 'Node 220' },
                { id: 322, title: 'Node 221' }
              ]
            }
          ]
        }
      ]
    }
  ];



<div class="tree">
  <ul>
    <!-- DEFINING OUR TEMPLATE -->
    <ng-template #recursiveList let-list>
      <!-- NODES AT DEPTH 1 -->
      <li *ngFor="let item of list">

        <input class="checkbox-node" id="node" type="checkbox">
        <label for="node">{{item.title}} </label>

        <!-- IF A BRANCH IS DEEPER THAN 1 -->
        <ul *ngIf="item.children?.length>0">
          <!-- RECURSIVE PART: REPEATING THE SAME -->
          <ng-container *ngTemplateOutlet=" recursiveList; context:{$implicit: item.children}">
          </ng-container>
        </ul>
      </li>
    </ng-template>
    <ng-container *ngTemplateOutlet="recursiveList; context: {$implicit:list}"></ng-container>

  </ul>
</div>
4

0 回答 0