itération d'un objet json sur Ngfor angulaire 2

Je vais avoir de la difficulté à l'itération d'un objet json dans le Ngfor, il est mon modèle :

modèle:

<h1>Hey</h1>
  <div>{{ people| json}}</div>
  <h1>***************************</h1>
  <ul>
    <li *ngFor="#person of people">
        {{
          person.label
        }}
    </li>
 </ul>

le peuple est l'objet json que je suis en train de réitérer, je vais avoir rhe résultat de (personnes | json) et de ne pas obtenir de la liste, voici une capture d'écran:

itération d'un objet json sur Ngfor angulaire 2

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

OriginalL'auteur Anna | 2016-05-25

  1. 12

    Votre people objet n'est pas un tableau de sorte que vous pouvez parcourir à partir de la boîte.

    Il y a deux options:

    • Vous souhaitez effectuer une itération sur une sous-propriété. Par exemple:

      <ul>
  <li *ngFor="#person of people?.actionList?.list">
    {{
      person.label
    }}
  </li>
</ul>

    • Vous souhaitez effectuer une itération sur les touches de votre objet. Dans ce cas, vous avez besoin pour mettre en œuvre une coutume pipe:

      @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 de l'utiliser 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:

    merci beaucoup thierry, j'ai ajouter la pipe comme vous l'avez mentionné, dans mon template, j'ai l'appeler comme ça et de ne pas obtenir quoi que ce soit : <li *ngFor="#personne de les gens | les touches "> {{ msg.de la valeur.D'Action.label }} </li> // par exemple l'obtention de toutes les étiquettes sous chaque nœud de l'action
    lorsque j'essaie comme ceci : <li *ngFor="#obj de listes "> {{ obj.de la valeur.liste[0].D'Action.label }} </li> je suis de l'étiquette : A120, et pas la première étiquette A1, et je suis juste un seul élément et non une liste, est-ce normal ??
    j'ai essayé d'ajouter l'index comme cela, il ne fonctionne pas : <li *ngFor="#obj de listes | touches, #i=index "> {{ obj.de la valeur.liste[i].D'Action.label }} </li> // comment puis-je passer la valeur de l'indice à l'intérieur de la liste ??

    OriginalL'auteur Thierry Templier