3列に動的チェックボックスを表示するためのブートストラップ

Question

私はAngular 4アプリでBootstrap 3を使用してフォームを作成しています。フォームでは、Webサービス呼び出しから返されたデータに基づいてチェックボックスをレンダリングする必要があります。したがって、データを繰り返し処理し、受け取ったすべての値に対してチェックボックスをレンダリングする必要があります。これらのチェックボックスのための

表示が少し下のスクリーンショットのように台無しにされた -

は3列にこれらのチェックボックスを表示する方法はあります。このような何か（あまりきれいに見える）

私の現在のコードは、私は、静的なチェックボックス（Twitter Bootstrap - checkbox columns/columns within form）との例を持っているスタックオーバーフロー上のいくつかの他のスレッドに遭遇している

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <form [formGroup]="myForm"> 

     <div class="row"> 
      ... 
     </div> 
     <div class="row"> 
      ... 
     </div> 
     <div class="row"> 
      <div class="col-xs-8"> 
      <div class="form-group"> 
       <label for="options" class="col-xs-4">Options</label> 
       <div class="checkbox" formGroupName="options" *ngFor="let option of options"> 
       <div class="col-xs-4"> 
       <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
         [checked]=false> {{option}} 
       </div> 
       </div> 
      </div> 
      </div> 
      <div class="col-xs-4"> 
      <div class="form-group"> 
       <label for="name" class="col-xs-4">Name</label> 
       <div class="col-xs-8"> 
       <input type="text" id="name" formControlName="name" class="form-control input-sm"> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="row"> 
     ... 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

以下の通りです。しかし、動的に生成されるチェックボックスにどのように適用するかを考え出すことはできません。

Answer 1

あなたは、このようlinq-es2015ライブラリを使用することができます。私はからWebサービスを呼び出すことができませんでしたので、//jsfiddle.net/yy7ddtby/11/：

import { asEnumerable } from 'linq-es2015'; 

//somewhere in component 
var groups = asEnumerable(this.options) 
    .Select((option, index) => { return { option, index }; }) 
    .GroupBy(
       x => Math.floor(x.index/3), 
       x => x.option, 
       (key, options) => asEnumerable(options).ToArray() 
      ) 
    .ToArray(); 

//template's fragment 
<div class="col-xs-8"> 
    <div class="row"> 
    <div class="col-xs-4"> 
     <label for="options" class="col-xs-4">Options</label> 
    </div>    
    <div class="col-xs-8"> 
     <div class="row" *ngFor="let group of groups"> 
     <div class="col-xs-4" *ngFor="let option of group"> 
      <input id="{{option}}" formControlName="{{option}}" type="checkbox" [checked]=false/> {{option}} 
     </div>  
     </div>    
    </div>    
    </div> 
</div>