时间戳

首页 > 解决方案 > ngFor 使用未知键迭代 json 子数组

json - ngFor 使用未知键迭代 json 子数组

问题描述

我从我的虚拟 json 文件中获取了一个特定用户，如下所示：

"id": "2",
"name": "Marios Manolakeris",
"skills": [
     {
         "skill_1": "Machine Learning",
         "skill_2": "AI",
         "skill_3": "C++"
     }
]

我需要遍历技能，即使理论上我不知道关键值技能_1、技能_2、技能_3。

所以，一个解决方案是这样做：

<div *ngFor="let skill of user.skills">{{skill.skill_1}}, {{skill.skill_2}}, {{skill.skill_3}}</div>

但是，我想自动遍历 user.skills 。

有什么办法吗？谢谢！

标签： jsonangularngfor

解决方案

您可以Object.keys在密钥未知时使用，如下所示：

<div *ngFor="let skill of skills">
  <div *ngFor="let item of skill | keyvalue">
        {{item.value}}
  </div>
</div>

或 6.1+ 以后，您可以使用keyvaluepipe如下：

<div *ngFor="let skill of skills">
  <div *ngFor="let item of objectKeys(skill)">
        {{skill[item]}}
  </div>
</div>

在 .ts

objectKeys = Object.keys;
public user={"id": "2",
    "name": "Marios Manolakeris",
    "skills": [
        {
            "skill_1": "Machine Learning",
            "skill_2": "AI",
            "skill_3": "C++"
        }
    ]
}
skills:any;
constructor(){
  this.skills = this.user.skills;
}

Stackblitz 这里：https ://stackblitz.com/edit/angular-fst8lm-bjg5hu

推荐阅读