[英]Angular2 + Bootstrap Grid
In Angular2, I have a list of objects and I'm trying to use bootstrap's grid layout system, but am having some difficulty figuring out how to best do this in Angular2. 在Angular2中,我有一个对象列表,我正在尝试使用bootstrap的网格布局系统,但在Angular2中找出如何做到这一点时遇到一些困难。 Any help would be appreciated! 任何帮助,将不胜感激!
If I was using HandlebarsJS, I could accomplish this with the following code: 如果我使用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}}
So I want it to look like: 所以我希望它看起来像:
<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>
This is the rehashing of an old debate, but for a new version of Angular. 这是旧辩论的重演,但是对于Angular的新版本。 Some of the more popular/creative solutions for this question in Angular 1.x can be found here and can be updated for your purposes. Angular 1.x中针对此问题的一些更受欢迎/创造性的解决方案可以在此处找到,并且可以根据您的目的进行更新。 Personally, I favor Duncan's solution , but I think that's a matter of opinion. 就个人而言,我赞成Duncan的解决方案 ,但我认为这是一个意见问题。 An updated version of that code for Angular2 with a simple Codepen below: 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 Note: Blue background color is the row
. Codepen注意:蓝色背景颜色是row
。 Red is the col-md-*
cell. 红色是col-md-*
细胞。
As you can see, this code only uses one row
element that wraps all of the col-*
elements and inserts a clearfix
element every x elements. 如您所见,此代码仅使用一个包含所有clearfix
col-*
元素的row
元素,并在每个x元素中插入一个clearfix
元素。 IMO, this solution is relatively clean and seems to employ more of a Google Material Design Lite (MDL) -style grid implementation for rows and cells than the Bootstrap standard row/col implementation. IMO,这个解决方案比较干净,似乎比Bootstrap标准行/列实现更多地使用了用于行和单元的Google Material Design Lite(MDL)样式网格实现。
Granted, none of these answers provide you with exactly what you asked for, but it's a bit of apples to oranges. 当然,这些答案都没有为您提供您所要求的确切内容,但它有点像苹果到橙子。
we had the same issue here creating a list with the ability to switch between list style and grid style. 我们在这里创建了一个列表,可以在列表样式和网格样式之间切换。 The best way to set up the grid style with bootstrap and angular 2 is to manipulate the input array to the needs of the grid row/col arrangement. 使用bootstrap和angular 2设置网格样式的最佳方法是根据网格行/列排列的需要操作输入数组。
Create a two dimensional array of rows with the amount of cols you need. 使用所需的cols数量创建一个二维行数组。 This example shows a full dynamic version. 此示例显示完整的动态版本。
We hope this will help you... 我们希望这会对你有所帮助......
Component code: 组件代码:
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();
}
}
}
}
Template code: 模板代码:
<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.