时间戳

首页 > 解决方案 > 在 Angular 中从 json 获取键和值

json - 在 Angular 中从 json 获取键和值

问题描述

我需要从 json 中获取值（来自合并的 MySQL 表）。

我已经尝试了上一个主题的几种解决方案，但没有一个对我有用。

使用 *ngFor 访问对象的键和值

我的 JSON 格式是：

[
   {
      "idemployee":1,
      "name":"Ernest",
      "surename":"Pająk",
      "role":"Obsługa Baru",
      "employeehours":[
         {
            "idemployeehours":1,
            "date":"2019-01-10T23:00:00.000+0000",
            "quantity":8.0
         }
      ]
   }
]

我得到的是“键：0 和值：”（上面 Pardeep Jain 主题的回答）

编辑：这是我的代码：

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

员工来自 Angular 组件并提供了提到的 JSON。问题是从“employeehours”（如数量）中获取嵌套值

标签： jsonangular

解决方案

如果你在数组对象上运行 keyValue 管道，你会得到键作为数组中值的索引，所以为什么你需要一个嵌套的 ngFor 来对数组的值运行 keyvalue 管道

<div *ngFor="let item of employee">
    <div *ngFor="let emp of item |keyvalue "> 
        Key: <b>{{emp.key}}</b> and Value: <b>{{emp.value}}</b>
  </div>
</div>

演示

更新！

如果你想支持员工小时的 sohow 键值，其中值是数组最好的情况是在这里创建一个组件来完成所有这些并使用这个组件来呈现新的值，比如递归

零件 

export class RenderComponent  {

  @Input() items = [];

  isArray(value) {
    return value instanceof Array
  }
}

模板

<div *ngFor="let item of items">
    <div *ngFor="let obj of item | keyvalue " class="well"> 
        Key: <b>{{obj.key}}</b> and Value: <b>{{obj.value}}</b>

        <ng-container *ngIf="isArray(obj.value)">
            <render [items]="obj.value"></render>
        </ng-container>

  </div>
</div>

演示

推荐阅读