Каким может быть шаблон для временной шкалы?

Question

Я пытаюсь построить TimelineComponent, идея в том, что я могу написать

<timeline> 
    <timeline-item-group *ngFor="#group of groups" date="group.date"> 
     <timeline-item *ngFor="#item in group.items"> 
     ...do something with item here... 
     </timeline-item> 
    <timeline-item-group> 
</timeline> 

, который будет переводить на

<ul class="timeline"> 
    <li class="timeline-item">...group 1 item 1...</li> 
    <li class="timeline-item">...group 1 item 2...</li> 
    ... 
    <li class="timeline-separator">...group 1 date...</li> 
    <li class="timeline-item">...group 2 item 1...</li> 
    <li class="timeline-item">...group 2 item 2...</li> 
    ... 
    <li class="timeline-separator">...group 2 date...</li>   
</ul 

Вот машинописи для компонента (ов):

import { Component, Input } from 'angular2/core' 

@Component({ 
    selector: 'timeline', 
    templateUrl: 'app/timeline.component.html', 
    styleUrls: ['app/timeline.component.css'] 
}) 
export class TimelineComponent { 
    groups: TimelineItemGroupComponent[] = []; 
    constructor() { 
    } 
    addGroup(group: TimelineItemGroupComponent) { 
     this.groups.push(group); 
     console.log('item added'); 
    } 
} 

@Component({ 
    selector: 'timeline-item-group', 
    templateUrl: 'app/timeline-item-group.component.html', 
    styleUrls: ['app/timeline-item-group.component.css'] 
}) 
export class TimelineItemGroupComponent { 
    @Input() name: string; 
    items: TimelineItemComponent[] = []; 
    constructor(timeline: TimelineComponent) { 
     timeline.addGroup(this); 
    } 
    addItem(item: TimelineItemComponent) { 
     this.items.push(item); 
    } 
} 

@Component({ 
    selector: 'timeline-item', 
    templateUrl: 'app/timeline-item.component.html', 
    styleUrls: ['app/timeline-item.component.css'] 
}) 
export class TimelineItemComponent { 
    @Input() title: string; 
    constructor(timelineGroup: TimelineItemGroupComponent) { 
     timelineGroup.addItem(this); 
    } 
} 

Дело в том, как мне перебирать группы? Если бы это был просто плоский список пунктов, которые я бы просто написать

<ul> 
    <li class="timeline-item" *ngFor="#item of items">...</li> 
</ul> 

, но есть еще один уровень, чтобы перебрать (группы), и я не хочу, чтобы генерировать дополнительный тег, например,

<ul> 
    <div *ngFor="#group of groups"> 
     <li class="timeline-item" *ngFor="#item of group.items">...</li> 
     <li class="timeline-separator">{{group.date}}</li> 
    </div> 
</ul> 

Надеюсь, у меня есть точка. Итак, каковы мои варианты?

Answer 1

Невозможно сгладить *ngFor.

Просто сглаживать данные, прежде чем генерировать DOM из него и использовать

<ul> 
    <ng-container *ngFor="let item of flattenedHeroes trackBy:trackByHeroes"> 
    <li class="timeline-item">...</li> 
    <li class="timeline-separator" *ngIf="item.isGroup">{{item.date}}</li> 
    </ng-container> 
</ul> 

Я только что придумал isGroup. Это может быть все, что позволяет различать группу и элемент.