如何在 ngFor 中显示一个简单 json 的所有键和值？ [复制]

Posted 2023-03-13

【中文标题】如何在 ngFor 中显示一个简单 json 的所有键和值？ [复制]

【英文标题】：how can I show in a ngFor all the keys and values of a simple json? [duplicate]

【发布时间】：2019-07-13 17:24:40

【问题描述】：

基本上我有一个类似的json（这是一个例子，我真正的json有n个字段，它可以是动态的）：

data=
[
  
    "name":"paul",
    "age":23,
    "gender":"male"
  ,
  
    "name":"adrian",
    "age":20,
    "gender":"male"
  ,    
  
    "name":"yorsy",
    "age":26,
    "gender":"male"
  
]

我想要输出（第一位置）：

key: name, value: paul
key: age, value:23
key: gender: value:male

我该怎么做？我有一个错误，因为 angular 迭代了一个数组。

//in this case, I want show the first position of the data
<div *ngFor="let item of data[0]; let i=index">
  key: item, value: item[i]
</div>

这是我的代码：

https://stackblitz.com/edit/angular-j2rpdq

【参考方案1】：

如果您使用的是 Angular（v6.1.0 或更高版本），您可以使用 Angular 包的公共模块中的keyvalue 管道，如下所示 -

<div *ngFor="let item of data[0] | keyvalue">
    Key: <b>item.key</b> and Value: <b>item.value</b>
</div>