angular - 分层 TreeView 使用 Angular 8 中的 Ul li 展开折叠

Question

我是 Angular 新手，我有这么多代码来通过递归调用来表示 TreeView 中的分层 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>