如何使用以下 JSON 文件创建树表 html 文件答案

【问题标题】：How to create a tree table html file usin below JSON file如何使用以下 JSON 文件创建树表 html 文件
【发布时间】：2019-01-14 21:51:52
【问题描述】：

我正在尝试使用primeng 创建树表html 文件。 Html 文件应该能够呈现在 JSON 文件之下。

下面是 Json 响应。

{
      "data": [
        {
          "data": {
            "Briname": "Aamir",
            "aantalPersonen": "122"
          },
          "children": [
            {
              "data": {
                "Vestiging": "Ranchi",
                "aantalPersonen": "102"
              },
              "children": [
                {
                  "data": {
                    "Singalcode": "4",
                    "aantalPersonen": "15"
                  }
                },
                {
                  "data": {
                    "Singalcode": "5",
                    "aantalPersonen": "10"
                  }
                }
              ]
            },
            {
              "data": {
                "Vestiging": "Bangalore",
                "aantalPersonen": "82"
              },
              "children": [
                {
                  "data": {
                    "Singalcode": "6",
                    "aantalPersonen": "15"
                  }
                }
              ]
            }
          ]
        },
        {
          "data": {
            "Briname": "Abhinav",
            "aantalPersonen": "122"
          },
          "children": [
            {
              "data": {
                "Vestiging": "Bangalore",
                "aantalPersonen": "102"
              },
              "children": [
                {
                  "data": {
                    "Singalcode": "4",
                    "aantalPersonen": "15"
                  }
                }
              ]
           }
          ]
        }
      ]
    }

这里的父节点以“Brinname”作为关键数据元素名称，子节点以“vestging”和“Singalcode”作为数据元素。

我们如何使用树表来实现这一点？

HTML：

<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" (onNodeSelect)="nodeSelect($event)">
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns" >
    <tr [ttSelectableRow]="rowNode">
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-treeTable>

【问题讨论】：

标签： angular primeng primeng-treetable

【解决方案1】：

所以你想显示data的第一个属性

让_object = Object;在ts文件中声明

然后在 HTML 文件中显示第一个属性

{{ rowData[_object.keys(rowData)[0]] }}

演示here

【讨论】：

因为您不能在 HTML 上使用类 'Object' 但可以将其分配给 _object
你能帮忙用 observable map 函数映射它吗：stackoverflow.com/questions/54275822/…
我记得我回答了这个问题。是吗？ stackoverflow.com/a/54200809/5737571
但是我们如何通过 observable map 函数来接近。同样在 html 中，我们在 rownode 中使用 onject 来显示值，我们可以使用 rownode.name 来显示数据

【解决方案2】：

我认为需要重新映射和修复属性名称。

像这样：

{
  "data": [
    {
      "data": {
        "name": "Briname: Aamir",
        "aantalPersonen": "122"
      },
      "children": [
        {
          "data": {
            "name": "Vestiging: Ranchi",
            "aantalPersonen": "102"
          },
...

【讨论】：

那么在这种情况下，BRINname 和残留也将出现在用户界面中。我如何将嵌套的 json 消息映射到表树 Json 格式
如何映射术前名称
在这种情况下我们如何映射属性名称