Json 在angular 6中使用递归的树结构

我有这种类型的json，我想要在angular 6中使用递归的树结构。 我无法更改json格式 我必须为递归创建另一个组件。 我尝试过使用for循环，也尝试过在ng容器和ng模板的帮助下使用递归列表。但它不起作用 对于预期的输出，我共享了一个图像链接

提前谢谢

---

你可以这样做

@组件({
选择器：“树视图”，
模板：`
{{d.name}
`,
样式：['.childcls{左边距：20px；}']
})
类TreeViewComponent实现OnInit{
@Input（）公共数据：任意；
@Input（）公共pId：任意；
@Input（）公共cls:string；
public getChildren（）：任意{
让childs=[]；
如果（this.data&&this.data.length>0）{
childs=this.data.filter（（（x）=>{return x.parentLayerId==this.pId}）.bind（this））；
}
返回儿童；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
类HomeComponent{
公共数据：任何={
“层”：[
{
“id”：0，
“名称”：“公园”，
“parentLayerId”：-1，
“子层”：[1,2,3,4]
},
{
“id”：2，
“名称”：“路径”，
“parentLayerId”：0，
“子层”：空
},
{
“id”：3，
“名称”：“普莱森顿公园”，
“parentLayerId”：0，
“子层”：空
},
{
“id”：9，
“名称”：“wManholes”，
“parentLayerId”：-1，
“子层”：空
},
{
“id”：10，
“名称”：“城市水表”，
“parentLayerId”：9，
“子层”：空
},
{
“id”：51，
“名称”：“包裹”，
“parentLayerId”：10，
“亚层”：[52,53]
}
]
};
}

大家好，欢迎来到stackoverflow。我找不到您的图像，预期输出是什么？[1]：

 {
      "layers": [
        {
          "id": 0,
          "name": "Parks",
          "parentLayerId": -1,
          "subLayerIds": [1, 2, 3, 4]
        }, 
        {
          "id": 2,
          "name": "Trails",
          "parentLayerId": 0,     
          "subLayerIds": null,

        },
        {
          "id": 3,
          "name": "Pleasanton_Parks",
          "parentLayerId": 0,
          "subLayerIds": null,

        },

        {
          "id": 9,
          "name": "wManholes",
          "parentLayerId": 5,
          "subLayerIds": null,

        },
        {
          "id": 10,
          "name": "wMeters_CityWater",
          "parentLayerId": 5,
          "subLayerIds": null,

        },{
          "id": 51,
          "name": "parcels",
          "parentLayerId": 46,
          "subLayerIds": [52, 53]
        },
        {
          "id": 52,
          "name": "binit root 31",
          "parentLayerId": 51,
          "subLayerIds": null,
        },
        {
          "id": 53,
          "name": "binit root 32",
          "parentLayerId": 51,
          "subLayerIds": [54],

        },
        {
          "id": 54,
          "name": "binit root 41",
          "parentLayerId": 53,
          "subLayerIds": null,
        },
    ]
    }

@Component({
    selector: 'tree-view',
    template: `
    <ng-container *ngFor="let d of getChildren()">
      <div style="clear: both;" [ngClass]="cls">
          <label>{{d.name}}</label>
          <tree-view [data]="data" [cls]="'childcls'" [pId]="d.id"></tree-view>
      </div>
    </ng-container>
   `,
    styles: ['.childcls { margin-left: 20px; }']
})
class TreeViewComponent implements OnInit {
    @Input() public data: any;
    @Input() public pId: any;
    @Input() public cls: string;

    public getChildren(): any {
        let childs = [];
        if (this.data && this.data.length > 0) {
            childs = this.data.filter(((x) => { return x.parentLayerId == this.pId }).bind(this));
        }

        return childs;
    }
}

@Component({
    selector: 'my-app',
    template: `
    <tree-view [data]="data.layers" [cls]="''" [pId]="-1"></tree-view>
  `,
})
class HomeComponent {
    public data: any = {
        "layers": [
            {
                "id": 0,
                "name": "Parks",
                "parentLayerId": -1,
                "subLayerIds": [1, 2, 3, 4]
            },
            {
                "id": 2,
                "name": "Trails",
                "parentLayerId": 0,
                "subLayerIds": null

            },
            {
                "id": 3,
                "name": "Pleasanton_Parks",
                "parentLayerId": 0,
                "subLayerIds": null

            },
            {
                "id": 9,
                "name": "wManholes",
                "parentLayerId": -1,
                "subLayerIds": null

            },
            {
                "id": 10,
                "name": "wMeters_CityWater",
                "parentLayerId": 9,
                "subLayerIds": null

            },
            {
                "id": 51,
                "name": "parcels",
                "parentLayerId": 10,
                "subLayerIds": [52, 53]
            }
        ]
    };
}

 public getChildren(arr,parentId ) {
     //console.log("arr , parentId",arr,parentId)
     let output = [];
     for (const obj of arr) 
     {           
       //console.log("obj",obj)
       if(obj.parentLayerId == parentId) 
       {        
         var children = this.getChildren(arr,obj.id)
         if(children.length)
         {
           obj.children = children
         }
         output.push(obj)
      }
     }
     console.log("output",output)
     return output
   }