[英]Angular2 + Bootstrap Grid
在Angular2中,我有一个对象列表,我正在尝试使用bootstrap的网格布局系统,但在Angular2中找出如何做到这一点时遇到一些困难。 任何帮助,将不胜感激!
如果我使用HandlebarsJS,我可以使用以下代码完成此操作:
{{#for elements}}
{{#if index % 12 === 0}}
<div class="row">
{{/if}}
<div class="col-md-2">
{{element.name}}
</div>
{{#if index % 12 === 0}}
</div>
{{/if}}
{{/for}}
所以我希望它看起来像:
<div class="row">
<div class="col-md-2">
Bob
</div>
<div class="col-md-2">
Joe
</div>
...
</div>
<div class="row">
<div class="col-md-2">
Julie
</div>
<div class="col-md-2">
Cheryl
</div>
...
</div>
这是旧辩论的重演,但是对于Angular的新版本。 Angular 1.x中针对此问题的一些更受欢迎/创造性的解决方案可以在此处找到,并且可以根据您的目的进行更新。 就个人而言,我赞成Duncan的解决方案 ,但我认为这是一个意见问题。 Angular2代码的更新版本,下面是一个简单的Codepen:
<div class="row">
<div *ngFor="let hero of heroes; let i = index">
<div class="clearfix" *ngIf="i % 3 == 0"></div>
<div class="col-md-4">{{hero.name}}</div>
</div>
</div>
Codepen注意:蓝色背景颜色是row
。 红色是col-md-*
细胞。
如您所见,此代码仅使用一个包含所有clearfix
col-*
元素的row
元素,并在每个x元素中插入一个clearfix
元素。 IMO,这个解决方案比较干净,似乎比Bootstrap标准行/列实现更多地使用了用于行和单元的Google Material Design Lite(MDL)样式网格实现。
当然,这些答案都没有为您提供您所要求的确切内容,但它有点像苹果到橙子。
我们在这里创建了一个列表,可以在列表样式和网格样式之间切换。 使用bootstrap和angular 2设置网格样式的最佳方法是根据网格行/列排列的需要操作输入数组。
使用所需的cols数量创建一个二维行数组。 此示例显示完整的动态版本。
我们希望这会对你有所帮助......
组件代码:
export class Component implements OnChanges {
@Input() items: any[] = [];
@Input() gridCols: number = 4; // The number of cols in grid
private gridItems: any[][];
private gridValidValues = [1, 2, 3, 4, 6, 12]; // divisible without remainder col count
private initGrid() {
this.gridCols = this.gridCols | 0; // cast to int
this.gridCols = this.gridCols || 1; // ensure min. one row
if(!this.gridValidValues.find(value => this.gridCols === value)) {
this.gridCols = 4; // correct invalid input to default col count
}
let addition = this.items.length % this.gridCols > 0 ? 1 : 0;
let rows = ((this.items.length / this.gridCols) | 0) + addition;
this.gridItems = [];
let index = 0;
for(var i = 0; i < rows; i++) {
let row: any[] = [];
for(var j = 0; j < this.gridCols && index < this.items.length; j++) {
row.push(this.items[index]);
index++;
}
this.gridItems.push(row);
}
}
ngOnChanges(changes: SimpleChanges): void {
let itemsChange: SimpleChange = changes["items"];
if(itemsChange) {
let previous: any[] = itemsChange.previousValue;
let current: any[] = itemsChange.currentValue;
if(previous.length != current.length) {
this.initGrid();
}
}
}
}
模板代码:
<div class="row"
template="ngFor let row of gridItems">
<div bind-class="'col-md-' + (12 / gridCols)"
template="ngFor let item of row">
{{item.anyvalue}}
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.