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

【问题标题】：ngFor to iterate json sub array with unknown keysngFor 使用未知键迭代 json 子数组
【发布时间】：2019-02-26 22:43:21
【问题描述】：

我从我的虚拟 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。

有什么办法吗？谢谢！

【问题讨论】：

标签： json angular ngfor

【解决方案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

【讨论】：

您好，谢谢您的回答。我收到此错误，但无法读取未定义的属性“键”
没注意到 skills 是一个数组。更新了我的答案。