使用JSON填充树表中的数据

Question

我正在尝试使用树表显示Json消息的层次结构。

它看起来像

>Aamir
 >Ranchi
    > 12
    > 20
 > Bangalore
    > 22
>Abhinav
 > Bangalore
   >26

我也希望用户单击或选择ex（20,22,26）的最后一个节点，它应该导航到下一个屏幕。

有人可以让我知道我该怎么做

我在下面提供了所有详细信息。

Json消息（filesystem.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"
              }
            }
          ]
       }
      ]
    }
  ]
}

HTML （使用primeng的树表）：

<h3>Dynamic Columns</h3>
<p-treeTable [value]="files2" [columns]="cols">
    <ng-template pTemplate="header" let-columns>
        <tr [ttRow]="rowNode">
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr>
            <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>

组件（树表组件）：

export class AppComponent implements OnInit {

  //files1: TreeNode[];

  files2: TreeNode[];

  cols: any[];

  constructor(private nodeService: NodeService) { }

  ngOnInit() {
     // this.nodeService.getFilesystem().then(files => this.files1 = files);
      this.nodeService.getFilesystem().then(files => this.files2 = files);

      this.cols = [
          { field: 'name', header: 'Name' },
          { field: 'size', header: 'Size' },
          { field: 'type', header: 'Type' }
      ];
  }
}

服务（用于呈现json消息的服务）：

 import { Injectable } from '@angular/core';
    import { TreeNode } from 'primeng/api';
    import { HttpClient } from "@angular/common/http";

    @Injectable({
        providedIn : 'root'
    })

    @Injectable()
    export class NodeService {

        constructor(private http: HttpClient) {}

       getFilesystem() {
        return this.http.get<any>('assets/filesystem.json')
          .toPromise()
          .then(res => <TreeNode[]> res.data);
        }       

    }