Angular treetable (таблица дерева Primeng) - получить все родительские узлы детей

Question

Я использую primengtreetable для построения дерева с помощью angular2. После того, как я выбрал узел, я хочу знать, что «родительский узел» для выбранного узла так же мал, как выбранный узел.

В этом случае, если я нажму 4, я хочу узнать о данных о выбранном узле (4) и родительском узле (Ранчи и Аамир).

Какие изменения можно внести в исходные файлы для получения результата?

Таблица дерева Html :

<h3 class="first">Basic</h3>
<p-treeTable [value]="data">
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
    <tr>
      <td>
        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
        <a routerLink="/overzicht-signal/details" *ngIf="!rowNode.node.children">{{ rowData[_object.keys(rowData)[0]] }}</a>
        <span *ngIf="rowNode.node.children">{{ rowData[_object.keys(rowData)[0]]}}</span>
      </td>
      <td>{{rowData.aantalPersonen}}</td>
    </tr>
  </ng-template>
</p-treeTable>

Файл машинописного текста :

export class CollapsibleBrinVestigingComponent implements OnInit{

  signalFilter: any[]

  data: any[] = [];

  _object = Object;

  constructor( private signalService: OverzichtSignalService) { }

  ngOnInit(): void {
    //this.signalService.getFilesystem().subscribe(x => {this.responseData = x});
    this.signalFilter = this.signalService.getOverzichtSignalenOrderByBrinVestigingSignalcode();
    this.signalFilter.forEach(element => {
      let tmp: any = {
        data: {},
        children: []
      };
      Object.keys(element).forEach(prop => {
        if (prop != 'signalenVestiging') {
          tmp.data[prop] = element[prop];
        } else {
          element[prop].forEach(c1 => {
            let tmp1: any = {
              data: {},
              children: []
            };
            Object.keys(c1).forEach(prop1 => {
              if (prop1 != 'signalenCode') {
                tmp1.data[prop1] = c1[prop1];
              } else {
                c1[prop1].forEach(c2 => {
                  tmp1.children.push({ data: c2 });
                });
              }
            });
            tmp.children.push(tmp1);
          });
        }
      });
      this.data.push(tmp);
    });

  }

}

Класс обслуживания

@Injectable()
export class OverzichtSignalService {

  const BRINSIGNAALFILTER = [
    {
      "brinname": "Aamir",
      "aantalPersonen": "122",
      "signalenVestiging": [
        {
          "vestiging": "Ranchi",
          "aantalPersonen": "102",
          "signalenCode": [
            {
              "signaalCode": "4",
              "aantalPersonen": "15"
            },
            {
              "signaalCode": "5",
              "aantalPersonen": "15"
            }
            ]
        },
        {
          "vestiging": "Bangalore",
          "aantalPersonen": "82",
          "signalenCode": [
            {
              "signaalCode": "6",
              "aantalPersonen": "15"
            },
            {
              "signaalCode": "7",
              "aantalPersonen": "15"
            }
            ]
        }
        ]
    },
    {
      "brinname": "Abhinav",
      "aantalPersonen": "122",
      "signalenVestiging": [
        {
          "vestiging": "Bangalore",
          "aantalPersonen": "102",
          "signalenCode": [
            {
              "signaalCode": "7",
              "aantalPersonen": "15"
            }
            ]
        }
        ]
    }
    ]

  constructor(private http: HttpClient) {
  }


  getOverzichtSignalenOrderByBrinVestigingSignalcode() {
    return BRINSIGNAALFILTER;
  }

} 

Из класса обслуживания он возвращает сообщения Json в формате, который отформатировал его в формате Json в виде древовидной таблицы (primeng), и отображает данные в файле HTML.

Answer 1

Я могу получить разрешение.

Я использовал onNodeSelect api из Treenode. По щелчку узла я просто проверяю, есть ли у узла дочерний узел или нет. Если они не имеют, я получаю данные последнего дочернего узла, используя event.node.data, а затем вызываю функцию и возвращаюсь к родителю и получаю данные родителя.

 nodeSelect(event) {
    if(!event.node.children) {
      this.signalenCodeNode = event.node.data
      this.getParentDetails(event.node)
    }
  }


  getParentDetails(node: TreeNode) {
    if(node.parent){
      this.signalenVestigingNode= node.parent.data
       if(node.parent.parent){
         this.signalenBrin= node.parent.parent.data
       }
    }
  }

HTML :

<h3 class="first">Basic</h3>
<p-treeTable [value]="data" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="nodeSelect($event)">
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
    <tr >
      <td [ttSelectableRow]="rowNode" >
        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
        <span>{{ rowData[_object.keys(rowData)[0]] }} </span>
      </td>
      <td>{{rowData.aantalPersonen}}</td>
    </tr>
  </ng-template>
</p-treeTable>