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が好きですが、それは意見の問題だと思います。以下の簡単なCodepenとAngular2のためのそのコードの更新バージョン：

<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要素を挿入1つのrow要素を使用しています。 IMOでは、この解決法は比較的クリーンで、ブートストラップの標準の行/列実装より多くの行とセルの実装を採用しているようです。

これらの回答のいずれも、あなたが求めているものを提供するものではありませんが、オレンジのリンゴです。

Answer 2

リスト・スタイルとグリッド・スタイルを切り替える機能を持つリストを作成するのと同じ問題がありました。 ブートストラップとでグリッドスタイルを設定する最善の方法は、入力配列をグリッドの行/列の配置に合わせて操作することです。

必要な列の量の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>