嵌套的accordion (accordion中的accordion，accordion中的accordion等等)

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>

Answer 1

这可以通过嵌套具有输入属性的相同组件来轻松完成。下面的模板应该会给您一个提示

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

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

要记住的一件事是嵌套级别，如果它们太深，可能会抛出堆栈溢出错误。