Angular HTML中的嵌套子Json答案

【问题标题】：Nested Children Json in Angular HTMLAngular HTML中的嵌套子Json
【发布时间】：2021-12-19 19:33:41
【问题描述】：

我有一个带有嵌套子级的 JSON。 RowElements 可以有 n 个 colElements，colElements 可以有 n 个 RowElements。

JSON

"container": {
    "id": "37ec0632-3391-4ef5-a9cb-25db2216fa75",
    "rowElements": [
        {
            "id": "80e1dae7-b497-48d3-80ad-b94d36ada642",
            "colElements": [
                {
                    "id": "c662efe9-615c-4de5-97d3-2b02a5bce831",
                    "rowElements": [
                        {
                            "id": "b31960fd-c082-4d3b-88fc-c05f0cf837aa",
                            "colElements": []
                        },
                        {
                            "id": "7552306a-ca61-4d80-bb4e-d6c8d15c2c78",
                            "colElements": []
                        },
                        {
                            "id": "f669896d-132b-468e-8dcf-f2b59d509a76",
                            "colElements": []
                        }
                    ]
                }
            ]
        }
    ]
}

我如何在模板中动态地迭代子级：

<div class="row">
   <div class="col">
      <div class="row">
         <div class="col">
         </div>
         <div class="col">
         </div>
         <div class="col">
         </div>
         ...
      </div>
      ...
   </div>
  ...
</div>

【问题讨论】：

到目前为止您尝试过什么？请出示您损坏的代码。
我没有任何损坏的代码。我的问题是关于如何遍历这样一个动态 json。
您的解决方案是编写一个递归函数。你想访问孩子的 id 吗？
这个想法是你写代码。当它坏了，我们帮助修复它。但是由于您没有损坏代码，我们无能为力。
@AlirezaEbrahimkhani 是的，我想访问 ID 等属性。

标签： html json angular nested

【解决方案1】：

您可以使用嵌套的*ngFor 来迭代 JSON 并动态显示它。

我还创建了一个stackblitz 供您检查我的解决方案。

HTML - 我在这里显示 id 只是为了检查 JSON。

<div class="row" *ngFor="let firstRow of arr.container.rowElements">
  {{ firstRow.id }}
  <div class="col" *ngFor="let firstCol of firstRow.colElements">
    {{ firstCol.id }}
    <div class="row" *ngFor="let secondRow of firstCol.rowElements">
      {{ secondRow.id }}
      <div class="col" *ngFor="let secondCol of secondRow.colElements"></div>
    </div>
  </div>
</div>

AppComponent.ts - 我添加了一个变量来保存您的示例 JSON

export class AppComponent {
  arr = {
    container: {
      id: '37ec0632-3391-4ef5-a9cb-25db2216fa75',
      rowElements: [{
        id: '80e1dae7-b497-48d3-80ad-b94d36ada642',
        colElements: [{
          id: 'c662efe9-615c-4de5-97d3-2b02a5bce831',
          rowElements: [{
              id: 'b31960fd-c082-4d3b-88fc-c05f0cf837aa',
              colElements: []
            },
            {
              id: '7552306a-ca61-4d80-bb4e-d6c8d15c2c78',
              colElements: []
            },
            {
              id: 'f669896d-132b-468e-8dcf-f2b59d509a76',
              colElements: []
            },
          ],
        }, ],
      }, ],
    },
  };

  constructor() {
    console.log(this.arr.container);
  }
}

【讨论】：

这里的问题是我有 4 个静态 for 循环。但是最后一个空的 col-Element 可以再有一个 row 元素，而 row 元素可以再有一个 col 元素。那是动态的json。我需要一种算法来动态地遍历列表。