itération d'un objet json sur Ngfor dans angular 2
J'ai du mal à itérer un objet json dans le Ngfor, voici mon modèle:
modèle:
<h1>Hey</h1>
<div>{{ people| json}}</div>
<h1>***************************</h1>
<ul>
<li *ngFor="#person of people">
{{
person.label
}}
</li>
</ul>
people est l'objet json que j'essaie d'itérer, j'ai le résultat de (people | json) et je n'obtiens pas la liste, voici une capture d'écran:
et pour finir, voici une partie du fichier json:
{
"actionList": {
"count": 35,
"list": [
{
"Action": {
"label": "A1",
"HTTPMethod": "POST",
"actionType": "indexation",
"status": "active",
"description": "Ajout d'une transcription dans le lac de données",
"resourcePattern": "transcriptions/",
"parameters": [
{
"Parameter": {
"label": "",
"description": "Flux JSON à indexer",
"identifier": "2",
"parameterType": "body",
"dataType": "json",
"requestType": "Action",
"processParameter": {
"label": "",
"description": "Flux JSON à indexer",
"identifier": "4",
"parameterType": "body",
"dataType": "json",
"requestType": "Process"
}
}
},
n'hésitez pas à m'aider
Votre objet people
n'est pas un tableau, vous pouvez donc l'itérer hors de la boîte.
Il y a deux options:
Vous souhaitez parcourir une sous-propriété. Par exemple:
<ul> <li *ngFor="#person of people?.actionList?.list"> {{ person.label }} </li> </ul>
Vous souhaitez parcourir les clés de votre objet. Dans ce cas, vous devez implémenter un canal personnalisé:
@Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { if (!value) { return value; } let keys = []; for (let key in value) { keys.Push({key: key, value: value[key]}); } return keys; } }
et utilisez-le de cette façon:
<ul> <li *ngFor="#person of people | keys"> {{ person.value.xx }} </li> </ul>
Voir cette réponse pour plus de détails: