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

Question

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

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

我需要反复学习技能，即使理论上我不知道关键值skill_1、skill_2、skill_3。

因此，一个解决方案是这样做：

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

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

有办法吗？谢谢!

Answer 1

当键未知时，可以使用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