Angular2嵌套* ngFor [英] Angular2 nested *ngFor
问题描述
我使用一个数组存储一组组对象的列表和一个存储轻型对象列表的数组. 我想显示html中的第一组以及该组的所有连接灯.之后，下一组以及相关的指示灯等等....
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
所以我认为嵌套ngFor的语法是错误的.应该可以从上方调用组".
So I think the syntax is wrong for the nested ngFor. It should be possible to call "group" from above.
这是MyHue.Groups对象外观的重要部分:
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"}
在组"对象中，只有与该组相关的灯光ID
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}
所以我必须匹配哪个Light ID在哪个Group中，然后检查light Object的名称
So I have to match which Light ID is in which Group, then check the light Object for the name
推荐答案
看起来您需要创建一个更简单的数据结构，其中，灯光对象包含在hueGroup对象的array属性中.然后，您将可以轻松地遍历您的组以及模板中每个组的灯光.
Looks like you need to create a simpler data structure where your light objects are contained in an array property of your hueGroup objects. Then you'll be able to iterate easily through your groups, and each of their lights in your template.
例如，您的模板应该看起来像这样:
For example, your template should look more like this:
<ul>
<li *ngFor="let group of hueGroups">
{{group.name}}
<ul>
<li *ngFor="let light of group.lights">
{{light.name}}
</li>
</ul>
</li>
</ul>
并且您的组件应包含hueGroups数据对象或模型以进行渲染.
And your component should contain a hueGroups data object or model to render.
hueGroups = [{
name: "group 1",
lights: [{
name: "light 1"
},{
name: "light 2"
}]
},
{
name: "group 2",
lights: [{
name: "light 3"
},{
name: "light 4"
}]
}];
查看此插件，了解我的意思的有效示例: http://plnkr.co/edit/THXdN8zyy4aQMoo4aeto?p=preview
Check out this plunker for a working example of what I mean: http://plnkr.co/edit/THXdN8zyy4aQMoo4aeto?p=preview
此处的关键是使用您的模板来反映支持它的组件数据的内容.除了我的示例，您可能还想使用打字稿为组和灯光定义一个接口或类.
The key here is using your template to reflect the content of the component's data that's backing it. Beyond my example, you might want to use typescript to define an interface or class for your groups and lights.
您的示例稍微复杂一点，因为您的模板正在尝试呈现两个数据结构的综合(您的hueGroup.lights似乎只是light id的数组).我建议创建一个函数，该函数使用模板可以轻松迭代的嵌入式光源对象创建hueGroup对象.这是此类功能的示例:
Your example is a little more complicated because your template is trying to render a synthesis of two data structures (your hueGroup.lights seem to be arrays of just light ids). I'd recommend making a function that creates a hueGroup object with embedded light objects your template can iterate over easily. Here's an example of such a function:
已更新以反映示例数据:
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;
});
}
这是一个在工作示例中显示的小插曲. http://plnkr.co/edit/V309ULE8f6rCCCx1ICys?p=preview
Here is a plunker showing it in a working example. http://plnkr.co/edit/V309ULE8f6rCCCx1ICys?p=preview
这篇关于Angular2嵌套* ngFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
