Заполните данные в древовидной таблице с помощью JSON

Question

Я пытаюсь использовать древовидную таблицу, чтобы показать высокотехнологичную структуру сообщений Json.

Это похоже на

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

Также я хочу, чтобы пользователь щелкнул или выбрал последний узел для ex (20,22,26), он должен перейти к следующему экрану.

Может кто-нибудь, пожалуйста, позвольте мне знать, как я могу это сделать

Я предоставил ниже все детали.

Json Messages (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);
        }       

    }