Angular2嵌套* ngFor

发布时间：2020-12-17 17:44:30 所属栏目：安全来源：网络整理

导读：我使用一个数组来存储一个组对象列表和一个轻量级对象列表. 我想在html中显示第一组,并向该组显示所有连接的灯.之后,下一组和相关的灯等等…… div ul li *ngFor="let group of hueGroups" {{group.name}} li *ngFor="let light of hueLights; let i = index

我使用一个数组来存储一个组对象列表和一个轻量级对象列表.
我想在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!