Angular2 nested *ngFor

I use an array to store a list of group objects and an array of a list of light objects. I want to show the first group in the html and all connected lights to that group. After that the next group and the related lights and so on....

<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]);
   }
  }

}

If I try to run this I get the error

Cannot read property 'lights' of undefined

So I think the syntax is wrong for the nested ngFor. It should be possible to call "group" from above.

EDIT: This is the important part of how an object of the MyHue.Groups looks like:

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

In the Group object there is only the ID of the lights which are depending to this group

This is the important part of how a light object looks like:

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

This is what I get if I print the hole array to the console:

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

So I have to match which Light ID is in which Group, then check the light Object for the name