ngFor для перебора массива json с неизвестными ключами - PullRequest
Новая
       6

ngFor для перебора массива json с неизвестными ключами

0 голосов
/ 23 сентября 2018

Я получаю конкретного пользователя из моего фиктивного файла 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.

Есть ли способ?Спасибо!

1 Ответ

0 голосов
/ 23 сентября 2018

Вы можете использовать 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>

In .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

...