如何使用以下 JSON 文件创建树表 html 文件
Posted
技术标签:
【中文标题】如何使用以下 JSON 文件创建树表 html 文件【英文标题】：How to create a tree table html file usin below JSON file 【发布时间】：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>
【问题讨论】：
【参考方案1】：所以你想显示data的第一个属性
让_object = Object;在ts文件中声明
然后在 HTML 文件中显示第一个属性
rowData[_object.keys(rowData)[0]]
演示here
【讨论】：
因为您不能在 HTML 上使用类 'Object' 但可以将其分配给 _object 你能帮忙用 observable map 函数映射它吗：***.com/questions/54275822/… 我记得我回答了这个问题。是吗？ ***.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 格式 如何映射术前名称 在这种情况下我们如何映射属性名称以上是关于如何使用以下 JSON 文件创建树表 html 文件的主要内容，如果未能解决你的问题，请参考以下文章