Angular2 imbriquée *ngFor

- Je utiliser un tableau pour stocker une liste d'objets de groupe et un tableau de la liste des objets de la lumière.
J'en veux pour preuve le premier groupe dans le code html et tous reliés les lumières de ce groupe. Après que le groupe suivant et les lumières et ainsi de suite....

<div>
  <ul>
    <li *ngFor="let group of hueGroups">
      {{group.name}}
      <li *ngFor="let light of hueLights; let i = index">
      {{hueLights[group.lights[i]].name}}
    </li>
  </ul>
</div>



export class AppComponent implements OnInit {
  hueGroups:any[];
  hueLights:any[];

  constructor(){
    this.hueGroups = [];
    this.hueLights = [];
  }

  listAllGroups(){
   for(var g in MyHue.Groups){ //MyHue.Groups returen an array with objects
    console.log(g);
    console.log(MyHue.Groups[g].name);
    for(var id:number = 0; id < MyHue.Groups[g].lights.length; id++){
      console.log("LightID:" + MyHue.Lights[MyHue.Groups[g].lights[id]].name); //Returns the name of the Lights
    }
    this.hueGroups.push(MyHue.Groups[g]);
  }

  listAllLights(){
   for(var l in MyHue.Lights){ //MyHue.Lights returns an array with objects
    console.log(MyHue.Lights[l]);
    this.hueLights.push(MyHue.Lights[l]);
   }
  }

}

Si j'essaie d'exécuter ce que je reçois le message d'erreur

Impossible de lire la propriété 'lumières' undefined

Donc je pense que la syntaxe est mauvaise pour la imbriquée ngFor. Il devrait être possible d'appeler le "groupe" à partir de ci-dessus.

EDIT:
C'est la partie importante de la façon dont un objet de la MyHue.Groupes ressemble:

{action:Object
 class:"Living room"
 lights: Array(2)
   0:"3"
   1:"1"
 name:"Room1"}

Dans le Groupe de l'objet n'est que l'ID de lumières qui sont en fonction à ce groupe

C'est la partie importante de la façon dont un objet lumineux ressemble:

 {state: Object, type: "Extended color light", name: "Couch1", modelid: "LCT007"…}

C'est ce que j'obtiens si j'ai l'impression que le trou de tableau dans la console:

Object {1: Object, 3: Object, 4: Object}

Donc, je dois correspondre à la Lumière ID est dans le Groupe, puis vérifiez la lumière de l'Objet pour le nom

Il semble que vous essayez d'utiliser *ngFor avec un object. *ngFor fonctionne uniquement avec Arrays. Vous pouvez créer un tuyau et de les utiliser *ngFor pour itérer sur les touches de hueLights.
avez-vous un exemple? Je suis assez nouveau Angulaire 2
Inclure le contenu de hueLights et hueGroups donc ça va être mieux le comprendre.
ok j'ai compris, la partie importante
pouvez-vous inclure quelques exemples d'objets? Cela devrait être résolues par une seule carte plus susceptibles

OriginalL'auteur WeSt | 2017-05-30

  1. 8

    Ressemble vous avez besoin pour créer une simplification de la structure de données où votre lumière, les objets sont contenus dans un tableau de propriété de votre hueGroup objets. Ensuite, vous serez en mesure d'effectuer une itération facilement à travers vos groupes, et chacun de leurs lumières dans votre modèle.

    Par exemple, votre modèle doit ressembler à ceci:

    <ul>
    <li *ngFor="let group of hueGroups">
    {{group.name}}
    <ul>
        <li *ngFor="let light of group.lights">
        {{light.name}}
        </li>
    </ul>
    </li>
</ul>

    Et votre composant doit contenir un hueGroups objet de données ou d'un modèle à un rendu.

    hueGroups = [{
    name: "group 1",
    lights: [{
      name: "light 1"
    },{
      name: "light 2"
    }]
  },
  {
    name: "group 2",
    lights: [{
      name: "light 3"
    },{
      name: "light 4"
    }]
  }];

    Découvrez ce plunker pour un exemple de ce que je veux dire:
    http://plnkr.co/edit/THXdN8zyy4aQMoo4aeto?p=preview

    La clé ici est l'aide de votre modèle afin de refléter le contenu de l'élément de données de sauvegarde. Au-delà de mon exemple, vous pouvez utiliser la machine à définir une interface ou une classe pour vos groupes et les lumières.

    Votre exemple est un peu plus compliqué parce que votre modèle est d'essayer de rendre une synthèse de deux structures de données (votre hueGroup.les lumières semblent être des tableaux de juste la lumière ids). Je vous recommande de faire une fonction qui crée une hueGroup objet intégré dans la lumière des objets de votre modèle peut parcourir facilement. Voici un exemple d'une telle fonction:

    Mis à jour pour refléter les données d'exemple:

    ngOnInit(){
    this.hueGroups = this.hueGroupSource.map((group)=>{
      let lightObjects = group.lights.map((lightID)=>{
        return this.hueLightsSource.find((light, index) => {return index === lightID});
    });
    group.lights = lightObjects;
    return group;
  });

    }

    Ici est un plunker de le présenter dans un exemple de travail.
    http://plnkr.co/edit/V309ULE8f6rCCCx1ICys?p=preview

    Merci pour votre aide. J'ai inclus un échantillon pour le groupe et les objets de la lumière que je reçois de mon service. Peut-être que plus de sens maintenant
    J'ai mis à jour ma réponse d'utiliser des objets de votre lumière / groupe exemples. Bonne chance!
    Sonne bien, mais le problème avec l'objet de données / modèle ist qu'il n'y a pas toujours le même nombre de lumières dans un groupe. Un groupe peut avoir de un à plusieurs lumières. Est-il possible de faire cela avec un extra de données de l'objet?
    Un groupe dans mon plunkr exemple peut avoir un nombre quelconque de lumières. Vous devriez être en mesure de charger et d'enlever un peu de l'id d'un groupe dans l'application.fichier ts. Voici une fourchette de montrer des groupes avec différents nombres de lumières: plnkr.co/modifier/G6gHvmu9FzkEqtyVFiGu?p=preview. Pas sûr de ce que vous devez faire pour que mon plunkr n'est pas des problèmes?
    Il fonctionne presque. Je pense qu'il y a un problème dans cette ligne return index === lightID si j'ai éditer pour return index === lightID-1 il fonctionne pour le premier groupe de les corriger, mais dans le deuxième groupe, la lumière n'est pas défini.

    OriginalL'auteur SpaceFozzy