求助：Angular 5新手如何将指定JSON展示为树形结构

嘿，我懂你作为Angular 5新手的苦恼——把那堆扁平的JSON转成想要的树形结构展示，确实有点摸不着头脑！别慌，咱们一步步拆解来解决～

第一步：先把扁平数据转成树形结构格式 #

首先得把你原始JSON里的shapeDetails扁平数组，按name和number分组，再和task的嵌套结构结合起来，生成符合树形展示的数据源。你可以在组件里写一个转换方法：

// 假设你的原始数据存在这里
rawData = {
  "shape": [{
    "id": "1",
    "shapeDetails": [
      { "name": "someShape1", "number": "10", "identifier": "111" },
      { "name": "someShape1", "number": "10", "identifier": "222" },
      { "name": "someShape2", "number": "30", "identifier": "333" }
    ],
    "task": {
      "title": "first level",
      "key": "",
      "value": "",
      "childtask": [ { "title": "second..." } ]
    }
  }]
};

// 转换为树形结构的方法
transformToTree(): void {
  // 第一步：按name+number分组shapeDetails
  const groupedShapes = {};
  this.rawData.shape[0].shapeDetails.forEach(detail => {
    const groupKey = `${detail.name}_${detail.number}`;
    if (!groupedShapes[groupKey]) {
      groupedShapes[groupKey] = {
        title: `${detail.name} (${detail.number})`,
        childtask: []
      };
    }
    groupedShapes[groupKey].childtask.push({ title: detail.identifier });
  });

  // 第二步：把分组后的形状数据嵌入task的子节点（根据你的附图调整层级）
  this.treeData = {
    shape: [{
      ...this.rawData.shape[0],
      task: {
        ...this.rawData.shape[0].task,
        childtask: [
          ...this.rawData.shape[0].task.childtask,
          {
            title: "Shape Categories",
            childtask: Object.values(groupedShapes)
          }
        ]
      }
    }]
  };
}

// 在组件初始化时调用转换方法
ngOnInit(): void {
  this.transformToTree();
}

第二步：用Angular递归模板渲染树形 #

Angular里可以用ng-template实现递归渲染嵌套的树形结构，这样不管多少层都能自动渲染：

<!-- 根节点：渲染最外层的task -->
<div class="tree-container">
  <div *ngFor="let shape of treeData.shape">
    <div class="tree-node">{{ shape.task.title }}</div>
    <!-- 调用递归模板渲染子节点 -->
    <ng-container *ngTemplateOutlet="taskTemplate; context: { $implicit: shape.task.childtask }"></ng-container>
  </div>
</div>

<!-- 递归模板：负责渲染每一层的子节点 -->
<ng-template #taskTemplate let-childTasks>
  <div class="child-level">
    <div *ngFor="let task of childTasks" class="tree-node">
      {{ task.title }}
      <!-- 如果当前节点还有子节点，继续递归渲染 -->
      <ng-container *ngIf="task.childtask" 
                    *ngTemplateOutlet="taskTemplate; context: { $implicit: task.childtask }">
      </ng-container>
    </div>
  </div>
</ng-template>

第三步：加样式让树形结构更清晰 #

给树形节点加一些缩进和边框，让层级关系一目了然：

.tree-container {
  margin: 16px;
}

.tree-node {
  padding: 4px 0;
  font-size: 14px;
}

.child-level {
  margin-left: 20px;
  border-left: 1px solid #ddd;
  padding-left: 12px;
}

这样调整后，你就能得到和附图类似的树形展示啦！如果你的附图层级和我写的有差异，只需要修改transformToTree方法里的结构，把分组后的形状数据放到你需要的层级位置就行。

内容的提问来源于stack exchange，提问作者user2237700