Angular：使用不同的对象键在视图中显示列表答案

【问题标题】：Angular: Show list in view with different object keysAngular：使用不同的对象键在视图中显示列表
【发布时间】：2020-03-13 16:19:23
【问题描述】：

我有以下 JSON 对象：

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

现在我想在视图中显示它：

我怎样才能在视图中做到这一点？因为密钥每次都会变化。例如，一旦您拥有header，另一次拥有main 等等......类似于JSONEditor，您可以在其中编辑JSON 对象。但我想用我自己的设计创造类似的东西。我尝试使用 ngIf，但似乎真的很难。如果有任何建议或帮助，我将不胜感激。

【问题讨论】：

stackoverflow.com/questions/34849812/…

标签： json angular typescript object

【解决方案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>

【讨论】：