时间戳

首页 > 解决方案 > 以角度 2 显示嵌套列表

javascript - 以角度 2 显示嵌套列表

问题描述

我想显示嵌套列表。列表结构：

[
    {
        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 输出应该是这样的：

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

但是这种方式是不正确的，因为我不希望它被硬编码，因为这些数据将是动态的。你能帮我找到更好的解决方案来显示这些数据吗？它可以在模板或组件中完成。

标签： javascriptangular

解决方案

一种可能的方法是创建一个表示单个节点（名称、子节点）的组件

首先是界面：

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>

工作堆栈闪电战

支持展开/折叠的版本

推荐阅读