Как использовать шаблоны Angular2 с помощью * ngFor для создания таблицы из вложенных массивов?

Учитывая следующий массив в свойстве компонента 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> элементы после элемента </tr>, который определяет group, не внутри.

Есть ли какое-либо решение для такого рода проблем в шаблоне Angular2? Я ожидал бы некоторого специального тега, который я мог бы использовать вместо <tr>, который не был записан в dom. Что-то похожее на фасеты и фрагменты в JSF.

Ответы

Ответ 1

Вы можете использовать синтаксис шаблона ngFor на groups и обычный синтаксис внутри него для реальных строк, например:

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

Проверьте этот файл

Ответ 2

<table>
     <ng-container *ngFor="let group of groups">
         <tr><td><h2>{{item.name}}<h2></td></tr>
         <tr *ngFor="let item of group.items"><td>{{item}}</td></tr>
     </ng-container>
</table>

Ответ 3

это не точный вывод, который вы хотели, но, возможно, что-то подобное сделает. Родительский 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 {


}

Ответ 4

Попробуйте это. Область локальных переменных, определяемая директивой "шаблон".

<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>

Ответ 5

Я поклонник логики из шаблона как можно больше. Я бы предложил создать вспомогательную функцию, которая возвращает данные, которые вам нравятся в шаблоне. Например:

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

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

Это позволит вам сохранить вашу презентацию свободной от специальной логики. Это также позволяет вам напрямую использовать ваш источник данных.

Ответ 6

Это сработало для меня.

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

Ответ 7

Вот базовый подход - он может быть улучшен - из того, что я понял как ваше требование.

Это отобразит 2 colomns, один с именем групп и один со списком элементов, связанных с группой.

Хитрость - это просто включить список в ячейку элементов.

Надеюсь, что это поможет кому-то там.

Приветствия

<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.item">{{item}}</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>