javascript - 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>

typescript 文件:

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;
 }