Angular treetable（Primeng 树表）——获取所有子节点的父节点

Question

我正在使用primengtreetable 使用angular2 构建一棵树。 一旦我选择了一个节点，我想知道所选节点的“父节点”以及所选节点。

在这种情况下，如果我单击 4 ，我想知道有关单击节点 (4) 和父节点（ Ranchi 和 Aamir） 的数据。

可以在初始文件中进行哪些更改以获得结果？

树表 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 消息，该格式将其格式化为树形表结构 (primeng) Json 格式，并将其用于 HTML 文件以显示数据。

Answer 1

这是一位家长的例子。 （用于删除路由（例如节点））。

模板

    <p-tree [value]="routes"
            layout="horizontal"
            selectionMode="single"
            [(selection)]="selected">
    </p-tree>

    <a class="btn btn-primary"
           (click)="removeRoute(selected)">Remove Page</a>

成分

removeRoute(node) {
   const parent: any = this.findById(this.routes, node.parentId);
   const index = parent.children.findIndex(c => c.id === node.id);

   parent.children.splice(index, 1);
 }

 findById(data, id) {
   for (const node of data) {
     if (node.id === id) {
       return node;
     }

     if (node.children) {
       const desiredNode = this.findById(node.children, id);
       if (desiredNode) {
         return desiredNode;
       }
     }
   }
   return false;
 }

Answer 2

我能够得到解决方案。

我使用了 Treenode 的 onNodeSelect api。 单击节点时，我只是检查节点是否有任何子节点。 如果他们没有，我将使用 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>