角度：使用不同的对象键在视图中显示列表

Question

我有以下JSON对象：

header: {
        first: {
            title: {
                name: "Test
            }
        },
        second: {
            title: {
                name: "Test 2"
            },
            desc: {
                name: "Description"
            }
        }
    }

现在我想以这样的方式显示它：

如何在视图中做到这一点？由于键每次都会变化。例如，一旦您拥有header，又一次main，依此类推...诸如JSONEditor之类的东西，您可以在其中编辑JSON对象。但是我想用自己的设计来创建类似的东西。我尝试了ngIf，但看起来确实很难。如果有任何建议或帮助，我将非常感谢。

Answer 1

您可以使用KeyValuePipe来使用ngFor遍历对象。

<!-- app-your-node component -->
<div *ngFor="let item of object | keyvalue">
  {{ title }}
  <app-your-leaf *ngIf="yourLogicThatThisIsALeaf(item); else node" 
                 [title]="item.key" [object]="item.value"><app-your-leaf>
  <ng-template #node>
    <app-your-node [title]="item.key" [object]="item.value"></app-your-node>
  </ng-template>
</div>