我使用一个数组来存储一个组对象列表和一个轻量级对象列表.
我想在html中显示第一组,并向该组显示所有连接的灯.之后,下一组和相关的灯等等……
我想在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]);
}
}
}
如果我尝试运行此操作,我会收到错误消息
Cannot read property ‘lights’ of undefined
所以我认为嵌套的ngFor的语法是错误的.应该可以从上面调用“组”.
编辑：
这是MyHue.Groups对象的重要部分：
{action:Object
class:"Living room"
lights: Array(2)
0:"3"
1:"1"
name:"Room1"}
在Group对象中,只有灯的ID取决于该组
这是灯光对象的重要组成部分：
{state: Object,type: "Extended color light",name: "Couch1",modelid: "LCT007"…}
如果我将孔阵列打印到控制台,这就是我得到的：
Object {1: Object,3: Object,4: Object}
所以我必须匹配哪个Light ID在哪个Group中,然后检查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
这里的关键是使用您的模板来反映支持它的组件数据的内容.除了我的示例,您可能希望使用typescript为您的组和灯光定义接口或类.
您的示例稍微复杂一点,因为您的模板正在尝试渲染两个数据结构的合成(您的hueGroup.lights似乎只是轻微的数组).我建议创建一个函数来创建一个带有嵌入光对象的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
