[英]How to create a tree table html file usin below JSON file
我正在嘗試使用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"
}
}
]
}
]
}
]
}
這里的父節點具有“Briname”作為關鍵數據元素名稱,子節點具有“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>
所以你想顯示data
第一個屬性
讓聲明_object = Object;
在 ts 文件中
然后在 HTML 文件上顯示第一個屬性
{{ rowData[_object.keys(rowData)[0]] }}
演示在這里
我認為需要重新映射和修復屬性名稱。
像這樣:
{
"data": [
{
"data": {
"name": "Briname: Aamir",
"aantalPersonen": "122"
},
"children": [
{
"data": {
"name": "Vestiging: Ranchi",
"aantalPersonen": "102"
},
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.