Angular2 Nested * ngFor

Question

私はグループオブジェクトのリストとライトオブジェクトのリストの配列を格納するために配列を使います。 htmlの最初のグループとそのグループに接続されているすべてのライトを表示したいとします。後、私はこれを実行しようとすると次のグループなどに関連するライトと....

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

}

が、私はエラーを取得すること

プロパティ「ライト」を読み取ることができません定義されていない

だから、入れ子になったngForでは構文が間違っていると思います。上から "group"を呼び出すことは可能です。

EDIT： これはMyHue.Groupsのオブジェクトがどのように見えるかの重要な部分である：Groupオブジェクトで

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

これに応じているライトの唯一のIDがありますグループ

これは、光オブジェクトがどのように見えるかの重要な部分である：

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

のTh

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

は、だから私はライトIDがどのグループに、そして

Answer 1

はあなたのように見える名前のための光のオブジェクトをチェックしていると一致する必要があります。私は、コンソールにホールアレイを印刷する場合、私が得るものですライトオブジェクトがhueGroupオブジェクトの配列プロパティに含まれている、よりシンプルなデータ構造を作成する必要があります。その後、グループ内やテンプレート内の各ライトを簡単に反復することができます。例えば

、あなたのテンプレートは、より次のようになります。

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

そして、あなたのコンポーネントがレンダリングにhueGroupsデータオブジェクトまたはモデルを含める必要があります。

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

私が何を意味するかの作業例については、このplunkerをチェックアウト： http://plnkr.co/edit/THXdN8zyy4aQMoo4aeto?p=preview

ここで重要なことを裏付けていますコンポーネントのデータの内容を反映するために、テンプレートを使用しています。私の例を超えて、typescriptを使用して、あなたのグループや照明のためのインターフェイスやクラスを定義することができます。

あなたのテンプレートは2つのデータ構造の合成をレンダリングしようとしています（あなたのhueGroup.lightsは軽いIDの配列のようです）。テンプレートが簡単に反復処理できるように、ライトオブジェクトが埋め込まれたhueGroupオブジェクトを作成する関数を作成することをお勧めします。ここでそのような関数の例は次のとおり

は、例えばデータを反映するように更新：ここで

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

}

は、実施例では、それを示すplunkerあります。 http://plnkr.co/edit/V309ULE8f6rCCCx1ICys?p=preview