Angular2 嵌套 *ngFor答案

【问题标题】：Angular2 nested *ngForAngular2 嵌套 *ngFor
【发布时间】：2017-10-31 13:24:14
【问题描述】：

我使用一个数组来存储一组对象列表和一个包含灯光对象列表的数组。我想显示 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"}

在 Group 对象中只有依赖于该组的灯的 ID

这是灯光对象外观的重要部分：

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

如果我将孔数组打印到控制台，这就是我得到的结果：

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

所以我必须匹配哪个Light ID在哪个Group中，然后检查light Object的名称

【问题讨论】：

您似乎正在尝试将*ngFor 与object 一起使用。 *ngFor 仅适用于 Arrays。您可以创建一个管道并使用*ngFor 来迭代hueLights 的键。
你有这方面的例子吗？我对 Angular 2 很陌生
包含hueLights和hueGroups的内容，这样理解会更好。
好的，我把重要的部分包括在内了
你能包含一些示例对象吗？这应该可以通过一张地图解决

标签： angular nested ngfor

【解决方案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 为您的组和灯光定义一个接口或类。

您的示例稍微复杂一些，因为您的模板正在尝试呈现两个数据结构的合成（您的 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

【讨论】：

感谢您的帮助。我包括了我从我的服务中收到的组和灯光对象的样本。也许现在更有意义
我已经更新了我的答案以使用您的灯光/组示例中的对象。祝你好运！
听起来不错，但数据对象/模型的问题在于，一组中的灯数并不总是相同。一个组可以有一个到多个灯。甚至可以使用额外的数据对象来做到这一点吗？
我的 plunkr 示例中的组可以有任意数量的灯。您应该能够加载它并从 app.ts 文件中的组中删除一个灯光 ID。这是一个分叉，显示具有不同数量的灯的组：plnkr.co/edit/G6gHvmu9FzkEqtyVFiGu?p=preview。不确定我的 plunkr 无法解决您需要做什么？
它几乎可以工作。我认为return index === lightID 这一行存在问题，如果我将其编辑为return index === lightID-1，它适用于第一组正确，但在第二组中，灯光未定义。

【解决方案2】：

我设法通过下面嵌套的ngFors 来实现这一点：

<ion-card *ngFor="let exercise of exercises">
    <ion-card-header>
      <ion-card-title>
        {{exercise.name}}
      </ion-card-title>
    </ion-card-header>
    <ion-item *ngFor="let set of exercise.sets">
      set: {{set.setNo}}
      reps: {{set.reps}}
      weight:{{set.weight}}
    </ion-item>
  </ion-card>

【讨论】：