时间轴模板是什么样的？

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。这可以是允许区分组和项目的任何内容。

时间轴模板是什么样的？

What could a template for timeline look like?

angular2-template

angular