在 angular 2 中顯示嵌套列表

Question

我想顯示嵌套列表。 列表結構：

[
    {
        name: "Level 1A",
        children: [
            {
                name: "Level 2A",
                children: [
                
                ]
            },
            {
                name: "Level 2B",
                children: [
                    {
                        name: "Level 3A",
                        children: [...]
                    }
                ]
            }
        ]
    },
    {
        name: "Level 1B",
        children: [
            {
                name: "Level 2A"
                children: [...]
            }
        ]
    }
]

如您所見，我們有具有 2 個屬性的項目：名稱和子項。 它可能是嵌套了許多層。 HTML output 應該是這樣的：

<list>
    <list-grup name="Level 1A">
        <list-item name="Level 2A"></list-item>
        <list-item name="Level 2B"></list-item>
    </list-grup>
    <list-grup name="Level 1B">
        <list-item name="Level 2A"></list-item>
    </list-grup>
</list>

我發現的唯一方法是像這樣顯示它：

<list>
  <ng-container *ngFor="let item of list">
    <list-group *ngIf="item.children" [item]="item.name">
      <ng-container *ngFor="let item1 of item.children">
        <list-group [item]="item1.name">
          <list-group *ngIf="item1.children" [item]="item1.name">
            <ng-container *ngFor="let item2 of item1.children">
              ...
            </ng-container>
          </list-group>
        </list-group>
      </ng-container>
    </list-group>
  </ng-container>
</list>

但是這種方式是不正確的，因為我不希望它被硬編碼，因為這些數據將是動態的。 你能幫我找到更好的解決方案來顯示這些數據嗎？ 它可以在模板或組件中完成。

Answer 1

一種可能的方法是創建一個表示單個節點（名稱、子節點）的組件

首先是界面：

export interface Node {
  name: string;
  children: Node[];
}

具有一個@Input()綁定的組件

export class NodeComponent implements OnInit {
  @Input() node: Node;

html

<li>  
    <p>{{node.name}}</p>       
    <ul *ngFor="let item of node.children">
      <app-node [node]="item"></app-node>
    </ul>
</li>

整個過程從以下開始：

<ul>
  <ng-container *ngFor="let item of list">
    <app-node [node]="item"></app-node>
  </ng-container>
</ul>

工作堆棧閃電戰

支持展開/折疊的版本