如果我在子项中选择子项，如何在 json 数组中找到父项

Question

如果我从具有值 id 的选择器标记中选择任何一个子对象，如何找到具有完整信息的父对象，例如它包含的所有子对象。

这是我的html代码：

<select class="form-control show-tick" id="service_category" data-live-search="true" formControlName="service_category" (change)="selectCategory()">
                                    <option selected="" value="">Select</option>
                                    <ng-template #recursiveList let-categories>
                                        <ng-container *ngFor="let category of categories">
                                            <option [ngValue]="category.id">
                                                <i *repeatTimes="category.depth" class="material-icons">remove</i>
                                                <span *ngIf="category.parent != null">{{ category.name }}</span>
                                                <b *ngIf="category.parent == null">{{ category.name }}</b>
                                            </option>
                                            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: category.children}"></ng-container>
                                        </ng-container>
                                    </ng-template>
                                    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: categories}"></ng-container>
                                </select>

这是我的 json 数组：

[
{
    "id": 1,
    "name": "Travel",
    "parent": null,
    "children": [
        {
            "id": 2,
            "name": "Car",
            "parent": 1,
            "children": [
                {
                    "id": 3,
                    "name": "Cab Booking",
                    "parent": 2
                }
            ]
        }
    ]
}
]

我希望如果我从选择选项中选择出租车预订，那么我可以获得整个数组对象及其父对象和所有子对象。

Answer 1

您必须将 JSON 数据解析为 JavaScript 数据。解析数据后，您可以对数据进行后处理并将所有父 ID 替换为对父 ID 的引用。然后你可以使用整个category 对象作为[ngValue] 而不仅仅是id。在这些更改之后，您可以使用以下表达式在两个方向上遍历整个树：

category.parent.parent
category.children[2].children[0]
category.parent.children[2]

这是一个 2 级嵌套对象数组的最小示例，例如您的问题：

import { Component } from "@angular/core";

const json = `[
{
    "id": 1,
    "name": "Travel1",
    "parent": null,
    "children": [
        {
            "id": 2,
            "name": "Car",
            "parent": 1,
            "children": [
                {
                    "id": 3,
                    "name": "Cab Booking",
                    "parent": 2
                }
            ]
        },
        {
            "id": 4,
            "name": "Bike",
            "parent": 1,
            "children": [
                {
                    "id": 5,
                    "name": "Bike Booking",
                    "parent": 4
                }
            ]
        }
    ]
}, {
    "id": 11,
    "name": "Travel2",
    "parent": null,
    "children": [
        {
            "id": 12,
            "name": "Car",
            "parent": 11,
            "children": [
                {
                    "id": 13,
                    "name": "Cab Booking",
                    "parent": 12
                }
            ]
        },
        {
            "id": 14,
            "name": "Bike",
            "parent": 11,
            "children": [
                {
                    "id": 15,
                    "name": "Bike Booking",
                    "parent": 14
                }
            ]
        }
    ]
}
]`;

interface Obj {
  id: number;
  name: string;
  parent: Obj | null;
  children?: Obj[];
}

@Component({
  selector: "my-app",
  template: `
    <div *ngIf="objs">
      <select [(ngModel)]="value">
        <ng-container *ngFor="let obj of objs">
          <ng-container *ngFor="let child of obj.children">
            <option *ngFor="let el of child.children" [ngValue]="el">
              {{ el.id }}
            </option>
          </ng-container>
        </ng-container>
      </select>
      <p *ngIf="value">Children: {{ value.children }}</p>
      <p *ngIf="value">Parent: {{ value.parent.name }}</p>
      <p *ngIf="value">
        Parent's first child: {{ value.parent.children[0].name }}
      </p>
      <p *ngIf="value">Grandparent: {{ value.parent.parent.name }}</p>
      <p *ngIf="value">
        Grandparent's first child: {{ value.parent.parent.children[0].name }}
      </p>
    </div>
  `
})
export class AppComponent {
  objs: Obj[] | null = null;
  value: Obj | null = null;
  ngOnInit() {
    this.objs = JSON.parse(json).map(obj => {
      obj.children.forEach(child => {
        child.parent = obj;
        child.children.forEach(grandchild => (grandchild.parent = child));
      });
      return obj;
    });
  }
}

选定的类别存储在变量value 中，并且可以根据需要向上遍历树并返回。这个最小的例子仅限于给定的结构（2 级嵌套对象的数组）。

这里是现场演示stackblitz