Question

由于我对Angular 5有点新，我很难以下面的格式显示以下json。请参阅图片。

我还添加了示例输出json。

Sample Json:


{
  "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 level1",
          "key": "number",
          "value": "10",
          "childtask": [
            {
              "title": "third level1",
              "key": "identifier",
              "value": "111",
              "childtask": []
            },
            {
              "title": "third level2",
              "key": "identifier",
              "value": "222",
              "childtask": []
            }
          ]
        },
        {
          "title": "second level2",
          "key": "number",
          "value": "30",
          "childtask": []
        }
      ]
    }
  }
  ]
}

伪代码 1.Iterate through the task. 2. print the first level info 3. go to second level 4. get the key and value 5. match the key value with shapeDetails. 6. get that matching details. 7. go to third level 8. get the key and value 9. match the key value with shapeDetails. 10. get that matching details. 11. Put the third level under the matching second level shape details

我需要在Angular ui中以这种方式显示json。 image [1]：https://i.stack.imgur.com/pqsHm.jpg.Since shapeDetails可以拥有最多2000个对象，它的最佳解决方案是什么？此外，任务只有3级不超过。

我在下面添加了输出json：

Expected Output:

{
  "shape": [
    {
      "firstLevelDetails": {
        "title": "first level",
        "secondLevelDetails": [
          {
            "title": "second level1",
            "shapeDetail": {
              "name": "someShape1"//associated with number 10
            },
            "thirdLevelDetails": [
              {
                "title": "third level1"//identifier associated with number 10
              },
              {
                "title": "third level2"//identifier associated with number 10
              }
            ]
          },
          {
            "title": "second level2",
            "shapeDetail": {
              "name": "someShape2" //associated with number 30
            }
          }
        ]
      }
    }
  ]
}

由于

Answer 1

您可以使用提供树视图的现有npm包。

https://www.npmjs.com/package/angular-tree-component

https://angular2-tree.readme.io/

https://www.npmjs.com/package/devextreme

以下是使用devextreme包将数据显示为树状结构的plunker。

https://plnkr.co/edit/fyAPdSkOF8nD8ddmEvBi?p=preview

dx-tree-view组件使用如下：

<dx-tree-view
    id="simple-treeview"
    [items]="products"
    [width]="300"
    (onItemClick)="selectItem($event)"
></dx-tree-view>
<div id="product-details" *ngIf="currentItem.price">
    <img [src]="currentItem.image" />
    <div class="name">{{currentItem.text}}</div>
    <div class="price">{{"$" + currentItem.price}}</div>
</div>

在角度5中显示树状结构需要帮助

1 个答案: