时间戳

首页 > 解决方案 > Angular：使用不同的对象键在视图中显示列表

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

问题描述

我有以下 JSON 对象：

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

现在我想以这样的方式显示它： 在此处输入图像描述

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

标签： jsonangulartypescriptobject

解决方案

您可以使用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>

推荐阅读