在 Angular 模板中循环遍历带有子项的 Javascript 对象

Question

I have the following js object:

{
    "id": "1554038371930_ajhnms9ft",
    "name": "CPS",
    "nodes": [
        {
            "id": "1554038905938_le34li2cg",
            "name": "Consumer Journey",
            "nodes": [
                {
                    "id": "1554039157958_kwab8rj5f",
                    "name": "Average Rating",
                    "nodes": []
                },
                {
                    "id": "1554039174126_p47ugwkbv",
                    "name": "Product Quality",
                    "nodes": [
                        {
                            "id": "1554039298091_ewdyefkql",
                            "name": "Performance",
                            "nodes": []
                        },
                        {
                            "id": "1554039306834_qf54k1dqe",
                            "name": "Reliability",
                            "nodes": []
                        },
                        {
                            "id": "1554039320002_vfkenjmct",
                            "name": "Comfort",
                            "nodes": []
                        }
                    ]
                },
                {
                    "id": "1554039197951_ajvv8587d",
                    "name": "Supply & Delivery",
                    "nodes": []
                },
                {
                    "id": "1554735679177_g5tini7ga",
                    "name": "Behind Product",
                    "nodes": [
                        {
                            "id": "1554736595466_nt4owp9in",
                            "name": "Influencers",
                            "nodes": []
                        },
                        {
                            "id": "1554736608593_58yomqpya",
                            "name": "Brand Confidence",
                            "nodes": []
                        }
                    ]
                },
                {
                    "id": "1554736413715_jhro1oh0r",
                    "name": "Economical Value",
                    "nodes": [
                        {
                            "id": "1554736664421_wng97pbz8",
                            "name": {
                                "en": "Price"
                            },
                            "nodes": []
                        },
                        {
                            "id": "1554736676408_d4kiy2wv8",
                            "name": "Promotion & Reward",
                            "nodes": []
                        }
                    ]
                }
            ]
        }
    ]
}

I want to loop through it in my angular HTML template so I can have the following list:

CPS
    Consumer Journey
        Average Rating
        Product Quality
            Performance
            Reliability
            Comfort
        Supply & Delivery
        Behind Product
            Influencers
            Brand Confidence
        Economical Value
            Price
            Promotion & Reward

PS: I have an unknown number of levels!

I tried to implement that but my solution works only if I have a known number of levels:

<div *ngFor="let item of data">
  <p>{{ item.name }}</p>
  <div *ngIf="item.nodes.length">
    <div *ngFor="let subItem of item.nodes">
      <p>{{ subItem.name }}</p>
      <div *ngIf="subItem.nodes.length">
        <div *ngFor="let child of subItem.nodes">
          {{ child.name }}
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

you need a recursive component to loop through n levels:

@Component({
  selector: 'recursive-list',
  template: `
    <div *ngFor="let item of data">
      <p>{{ item.name }}</p>
      <recursive-list *ngIf="item.nodes.length" [data]="item.nodes"></recursive-list>
    </div>
  `
})
export class RecursiveListComponent {
  @Input() data;
}