Angular2 + Bootstrap Grid

Question

在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> 

Answer 1

這是一個古老的話題的換湯不換藥，但對於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-*單元格。

正如你看到的，這個代碼僅使用包裝所有col-*元素和插入一個clearfix元每X個元件一個row元素。國際海事組織，這個解決方案是相對乾淨的，似乎比Bootstrap標準的行/列實現更多地使用行和單元格的實現。當然，這些答案都不能完全爲你提供你所要求的東西，但這對橙子來說有點蘋果。

Answer 2

我們在這裏創建了一個能夠在列表樣式和網格樣式之間切換的列表。 使用引導程序和設置網格樣式的最佳方式角度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>