使用 children 数组迭代嵌套 object

Question

我正在尝试使用 Angular TS 在嵌套的 object 结构上进行迭代：

{
  "stringKey1": {
    "child": [
      {
        "stringKey2": {
          "child": []
        }
      },
      {
        "stringKey3": {
          "child": []
        }
      },
      {
        "stringKey4": {
          "child": [
            {
              "stringKey5": {
                "child": []
              }
            },
            {
              "stringKey6": {
                "child": []
              }
            }
          ]
        }
      }
    ]
  }
}

基本上每个“节点”都由一个字符串Key和一个object {"child" : []}组成，可以有很多children具有相同的结构。

我用管道试过 *ngFor，试过 *ngIf 来检查它是否是一个数组，但我无法设法让它起作用。无法知道结构有多深。

基本上尝试了我在互联网上看到的任何东西，但我可能遗漏了一些东西。

有什么帮助吗？

非常感谢。

Answer 1

我会避免嵌套对象 for-looping 附带的过多模板逻辑。很难阅读和调试。相反，尽可能简化 TS 代码中的数据。然后在模板中操作。

但我们可以利用 | keyvalue 管道通过 *ngFor 迭代对象。然后我们使用 ng-template 和 *ngTemplateOutlet 来创建递归。

<ng-template #recursiveList let-array>
  <li *ngFor="let item of array | keyvalue">
    {{item.key}} {{item.value}}
    <ul *ngIf="item.value"> 
      <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.value }"></ng-container>
    </ul>
  </li>
</ng-template>

<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: object }"></ng-container>

这是一个工作示例：https://stackblitz.com/edit/angular-nested-ngfor-in-table-4nqhve?file=src%2Fapp%2Fapp.component.html

使用 children 数组迭代嵌套 object

Iterate over nested object with array of children

angular

typescript

nested-loops

ngfor