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

问题描述

我从虚拟json文件中获得了一个特定用户，看起来像这样:

I get a specific user from my dummy json file and looks like this:

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

即使理论上我不知道关键值skill_1，skill_2，skill_3，我也需要遍历技能.

I need to iterate through skills, even if theoretically i don't know the key values skill_1, skill_2, skill_3.

因此，解决方案是这样做:

So, a solution is to do this:

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

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

but, I want to iterate through user.skills automatically.

有什么办法吗?谢谢！

Is there any way?Thanks!

推荐答案

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

You can use Object.keys when keys are unknown like below:

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

从6.1或更高版本开始，您可以按以下方式使用keyvaluepipe:

OR 6.1+ onwards you can use keyvaluepipe as below:

<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

Stackblitz here: https://stackblitz.com/edit/angular-fst8lm-bjg5hu

这篇关于ngFor使用未知键迭代json子数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！