我正在尝试构建一个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
这是组件的 typescript :
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>
希望我的观点得到了理解。那么我的选择是什么?
最佳答案
无法展平嵌套的*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
。这可以是任何可以区分组和项目的内容。
关于angular - 时间线模板会是什么样子?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36396509/