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

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>

OR 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

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

ngFor to iterate json sub array with unknown keys

json

ngfor

angular