Вложенный аккордеон (аккордеон внутри аккордеона и так далее ...)

Question

Мой Json-ответ такой:

  [  
   {  
      "name":"A",
      "price":50,
      "children":[  
         {  
            "name":"AA",
            "price":150,
            "children":[  
               {  
                  "name":"AAA",
                  "price":50,
                  "children":null
               }
            ]
         },
         {  
            "name":"AB",
            "price":766,
            "children":null
         }
      ]
   },
   {  
      "name":"B",
      "price":78,
      "children":[  
         {  
            "name":"C",
            "price":150,
            "children":null
         }
      ]
   },
   {  
      "name":"C",
      "price":453,
      "children":null
   }
]

Мне нужно создать вложенный аккордеон.Но дело в том, что это вложение никогда не заканчивается.А детей может быть нет.детей, и что дети могут иметь любое нет.детей и тд.

Так как я покажу это как аккордеон в html?Я использую Angular.

Я думал, что могу создать два отдельных компонента для родителя и ребенка.

  <table>
   <div *ngFor = "let acc of accountList">
      <tr>
         <td>{{ acc.name }}</td>
         <td>{{ acc.price }}</td>
      </tr>
      <div *ngIf = "acc.children?.length">
         <div *ngFor = "let a1 of acc.children">
            <tr>
               <td>{{ a1.name }}</td>
               <td>{{ a1.price }}</td>
               .... and so on
            </tr>
         </div>
      </div>
   </div>
</table>

это фактический результат, который я хочу: https://ibb.co/k3RjgqN

Answer 1

Это легко сделать, вложив один и тот же компонент в свойство input.Шаблон ниже должен дать вам подсказку

<ul *ngIf="data">
    <li *ngFor="let item of data">{{item.name}}:{{item.price}}
        <hello [data]="item.children"></hello>
    </li>
</ul>

Stackblitz на https://stackblitz.com/edit/angular-nested-tree

Одна вещь, которую нужно иметь в виду, это уровни вложенности, если они слишком глубокие, это может привести кошибка переполнения стека.