Question

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

谢谢。

 {
      "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,
        },
    ]
    }

Answer 1

您可以这样fiddle

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

Answer 2

 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
   }

在角度6中使用递归的树结构

2 个答案: