web-dev-qa-db-ja.com

* ngForでAngular2テンプレートを使用して、ネストされた配列からテーブルを作成する方法は？

コンポーネントプロパティgroupsに次の配列がある場合：

[
   {
     "name": "pencils",
     "items": ["red pencil","blue pencil","yellow pencil"]
   },
   {
     "name": "rubbers",
     "items": ["big rubber","small rubber"]
   },
]

各行にすべてのアイテムを含むhtmlテーブルを作成する方法は？期待されるHTML結果：

<table>
    <tr><td><h1>pencils</h1></td></tr>
    <tr><td>red pencil</td></tr>
    <tr><td>blue pencil</td></tr>
    <tr><td>yellow pencil</td></tr>
    <tr><td><h1>rubbers</h1></td></tr>
    <tr><td>big rubber</td></tr>
    <tr><td>small rubber</td></tr>
</table>

最初のレベルは簡単です：

<table>
    <tr *ngFor="#group of groups">
        <td><h1>{{group.name}}</h1></td>
    </tr>
</table>

しかし、今は#item of groupを反復処理する必要があります。問題は、新しい<tr>要素が必要なことですaftergroupを定義する</tr>要素、not inside。

Angular2テンプレートにこの種の問題の解決策はありますか？ domに書き込まれない<tr>の代わりに使用できる特別なタグが必要です。 JSFのファセットとフラグメントに似たもの。

angularangular2-templateangular-template
24
Witek
<table>
     <ng-container *ngFor="let group of groups">
         <tr><td><h2>{{group.name}}</h2></td></tr>
         <tr *ngFor="let item of group.items"><td>{{item}}</td></tr>
     </ng-container>
</table>
27
Victor

ngForのテンプレート構文をgroupsに使用し、その中の通常の構文を次のような実際の行に使用できます。

<table>
  <template let-group ngFor [ngForOf]="groups">
    <tr *ngFor="let row of group.items">{{row}}</tr>
  </template>
</table>

このプランクを確認

23
Abdulrahman

ここに基本的なアプローチがあります-それは確かに改善することができます-私があなたの要件であると理解したものです。

これにより、2つの列が表示されます。1つはグループ名、もう1つはグループに関連付けられたアイテムのリストです。

トリックは、単純にアイテムセル内にリストを含めることです。

<table>
  <thead>
    <th>Groups Name</th>
    <th>Groups Items</th>
  </thead>
  <tbody>
    <tr *ngFor="let group of groups">
      <td>{{group.name}}</td>
      <td>
        <ul>
          <li *ngFor="let item of group.items">{{item}}</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
8
avi.elkharrat

それはあなたが望んでいた正確な出力ではありませんが、おそらくこのようなことができるでしょう。親cmp：

<table>
  <item *ngFor="#i of items" [data]="i"></item>
</table>

子cmp

import {Component} from 'angular2/core';

@Component({
  selector: `item`,
  inputs: ['data'],
  template: `
    <tr><td>{{data.name}}</td></tr>
    <tr *ngFor="#i of data.items">
      <td><h1>{{i}}</h1></td>
    </tr>
  `
})
export default class Item {


}
2
kit

これを試して。 「template」ディレクティブで定義されたローカル変数のスコープ。

<table>
  <template ngFor let-group="$implicit" [ngForOf]="groups">
    <tr>
      <td>
        <h2>{{group.name}}</h2>
      </td>
    </tr>
    <tr *ngFor="let item of group.items">
                <td>{{item}}</td>
            </tr>
  </template>
</table>
1
yitzhak

これは私のために働いた。

<table>
  <tr>
    <td *ngFor="#group of groups">
       <h1>{{group.name}}</h1>
   </td>
  </tr>
</table>
0
neticous

私は、可能な限りテンプレートからロジックを排除するのが好きです。気になるデータをテンプレートに返すヘルパー関数を作成することをお勧めします。例えば：

getItemsForDisplay():String[] {
 return [].concat.apply([],this.groups.map(group => group.items));
};

<tr *ngFor="let item of getItemsForDisplay()"><td>{{item}}</td></tr>

これにより、プレゼンテーションを特別なロジックから解放できます。これにより、データソースを「直接」使用することもできます。

0
Malfus