web-dev-qa-db-ja.com

Angular2ネスト* ngFor

配列を使用して、グループオブジェクトのリストとライトオブジェクトのリストの配列を格納します。 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}

だから私はどのライトIDがどのグループにあるかを照合する必要があります、そして名前のライトオブジェクトをチェックしてください

angularnestedngfor
5
WeSt

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"
    }]
  }];

私の意味の実際の例については、このプランカーをチェックしてください： http://plnkr.co/edit/THXdN8zyy4aQMoo4aeto?p=preview

ここで重要なのは、テンプレートを使用して、それを支えるコンポーネントのデータのコンテンツを反映することです。私の例以外にも、TypeScriptを使用して、グループとライトのインターフェイスまたはクラスを定義することができます。

テンプレートが2つのデータ構造の合成をレンダリングしようとしているため、例はもう少し複雑です（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;
  });

}

これは、実際の例でそれを示すプランカーです。 http://plnkr.co/edit/V309ULE8f6rCCCx1ICys?p=preview

9
SpaceFozzy