Angular2嵌套* 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語法是錯誤的。應該可以從上面調用「組」。

編輯： 這是的MyHue.Groups的物體看起來像的重要組成部分：

{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"…} 

釷是是我所得到的，如果我打印孔陣列控制檯：

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

所以我要匹配光ID在該組，然後檢查燈光對象的名稱

Answer 1

看起來你需要創建一個更簡單的數據結構，其中light對象包含在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

這裏的關鍵是使用你的模板，以反映的依託其組件的數據的內容。除了我的例子之外，您可能想使用打字稿爲您的羣組和燈光定義界面或類。

您的示例稍微複雜一點，因爲您的模板試圖呈現兩個數據結構的合成（您的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