[分层树视图展开使用角度8中的Ul li折叠

Question

im为angular的新功能，我有这么多代码可通过递归调用在树视图中表示分层的json数据。此代码运行良好，但我想使用CARET图标展开和折叠treeView，但找不到任何方法。

<h1>Angular 2 Recursive List</h1>
<ul>
  <ng-template #recursiveList let-list>
    <li *ngFor="let item of list">
      {{item.name}}
      <ul *ngIf="item.children.length > 0">  <!-- item.subnodes.length -->
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: menuList}"></ng-container>
</ul>

“ menuList”的有效载荷

[
  {
    "menuId": 1,
    "menuName": "Inspection",
    "icon": "",
    "type": 1,
    "formId": 0,
    "formUUID": null,
    "formName": null,
    "menu": [
      {
        "menuId": 17,
        "menuName": null,
        "icon": "",
        "type": 2,
        "formId": 0,
        "formUUID": "2f84a801-cc3e-4807-a68c-cdd3cc9df9af",
        "formName": "Production Line",
        "menu": null
      }
    ]
  }
]

Answer 1

<h1>Angular 2 Recursive List</h1>
<ul>
  <ng-template #recursiveList let-list>
    <li *ngFor="let item of list">
      {{item.name}}
      <!--add a button-->
      <button (click)="item.isopen=!item.isopen">click</button>
      <!--change the condition-->
      <ul *ngIf="item.children.length > 0 && item.isopen">  
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: menuList}"></ng-container>
</ul>

<!--just for check values-->
<pre>{{menuList|json}}</pre>