動的複数列ドロップダウン - Angular2とBootstrap

Question

動的複数列ドロップダウンリストを作成する方法。私はangular2を使用して、このようなものを探していますhttp://alijafarian.com/bootstrap-multi-column-dropdown-menu/

しかし、ここでは3とリストアイテムhardcoded.Inに私の場合は私は動的リストが1つの列に5項目を表示したい固定列があります。例：のために：リストは20個の項目が含まれている場合、我々は1の5つの項目それぞれに4列は、私はアーティストやディスプレイのリストをループにngForディレクティブを使用しています

.... 
    <li role="presentation" class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" 
            href="#" role="button" 
            aria-haspopup="true" aria-expanded="false"> 
         Artists 
       <span class="caret"></span></a> 
     <ul class="dropdown-menu "> 
      <li *ngFor="let artist of artists"> 
       <a><input type="checkbox"> {{artist.name}} </a> 
      </li> 
     </ul> 
    </li> 
    ..... 

以下のように私のコードが見えますcolumn.Andだろうそれは今一列で。しかし、リストのサイズに応じて複数の列に表示したい。

Answer 1

あなたは、単純なチャンク機能を使って、データから新しい配列を作成する必要があります。

public chunk(arr, size) { 
    var newArr = []; 
    for (var i=0; i<arr.length; i+=size) { 
    newArr.push(arr.slice(i, i+size)); 
    } 
    return newArr; 
} 

と、このようなあなたのビューでいくつかの変更を実行します。ここでは

<ul class="dropdown-menu multi-column columns-2"> 
    <div class="row"> 
     <div class="col-sm-6" *ngFor="let persons of chunk(persons, 3)"> 
      <ul class="multi-column-dropdown"> 
       <li *ngFor="let person of persons"><a href="#">{{person.name}}</a></li> 
      </ul> 
     </div> 
    </div> 
</ul> 

は一例です： plunker