如何在ngFor中显示简单json的所有键和值?

时间:2019-02-20 05:14:38

标签: angular

基本上我有一个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

我该怎么做?我有一个错误,因为角度遍历数组。

//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 个答案:

答案 0 :(得分:3)

如果您使用的是Angular(v6.1.0或grater),则可以使用Angular包的通用模块中的keyvalue管道,如下所示-

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