Angular2 + 引导网格答案

【问题标题】：Angular2 + Bootstrap GridAngular2 + 引导网格
【发布时间】：2017-01-29 01:30:42
【问题描述】：

在 Angular2 中，我有一个对象列表，我正在尝试使用引导程序的网格布局系统，但在弄清楚如何在 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>

【问题讨论】：

标签： javascript angular typescript twitter-bootstrap-3 angular2-template

【解决方案1】：

我们在创建一个能够在列表样式和网格样式之间切换的列表时遇到了同样的问题。使用 bootstrap 和 angular 2 设置网格样式的最佳方法是根据网格行/列排列的需要来操作输入数组。

使用所需的列数创建一个二维行数组。此示例显示了一个完整的动态版本。

我们希望这会对您有所帮助...

组件代码：

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>

【讨论】：

【解决方案2】：

这是对旧辩论的重新讨论，但针对的是新版本的 Angular。 Angular 1.x can be found here 中针对这个问题的一些更流行/更有创意的解决方案，可以根据您的目的进行更新。就个人而言，我赞成Duncan's solution，但我认为这是一个见仁见智的问题。 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>

Working Codepen

Codepen 注意：蓝色背景颜色是row。红色是col-md-* 单元格。

如您所见，此代码仅使用了一个 row 元素，该元素包装了所有 col-* 元素，并每隔 x 个元素插入一个 clearfix 元素。 IMO，这个解决方案相对干净，似乎比 Bootstrap 标准的 row/col 实现更多地使用Google Material Design Lite (MDL)-style grid 实现行和单元格。

当然，这些答案都不能完全满足您的要求，但这有点像苹果对橙子。

【讨论】：