иерархическое древовидное представление развернуть Свернуть, используя Ul li в angular 8

Question

я новичок в angular, и у меня так много кода для представления иерархических json данных в виде дерева с рекурсивным вызовом. Этот код работает нормально, но я хочу развернуть и свернуть treeView, используя значок CARET, но я не сделал никак не найти.

<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

Я получил решение, и теперь оно работает, как и ожидалось. Вы также можете выполнить операцию crud с этими списками.

<ng-container *ngTemplateOutlet="treeViewList;context:{$implicit:menuListCopy}"></ng-container>
        <ng-template #treeViewList let-list>
            <ul>
                <li *ngFor="let item of list;" style="color: black;">
                    <i class="fa" *ngIf="item.menu" [ngClass]="item.isopen ? 'fa fa-caret-down': 'fa fa-caret-right'"
                        (click)="item.isopen=!item.isopen" style="font-size: larger;">
                    </i>
                    <span *ngIf="item.type == 1"
                        id="menuName" matTooltip="Edit Menu">
                        <span (click)="menuTrigerred(item)">{{item.menuName}}</span>
                        <button matTooltip="Create subMenu" (click)="addChildMenu(item)" class="iconBtn" style="font-size: 13px;">
                            <i class="fa fa-plus"></i>
                        </button>
                        <button matTooltip="Delete Menu" class="iconBtn" (click)="deleteMenu(item)" style="font-size: 11px;">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                    </span>
                    <span *ngIf="item.type == 2" matTooltip="Forms">
                        {{item.formName}}
                    </span>
                    <ul *ngIf="item.menu && item.isopen">
                        <ng-container *ngTemplateOutlet="treeViewList;context:{$implicit:item.menu}"></ng-container>
                    </ul>
                </li>
            </ul>
        </ng-template>

Answer 2

<code><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}}