树结构切换可见性，基于选中状态 - Angular

如何解决树结构切换可见性，基于选中状态 - Angular

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

The view

我在模板中使用递归来列出树的所有节点。如果父节点复选框被选中，我无法实现的功能仅显示子节点。我知道这可以使用 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'
            },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>