动态多列下拉菜单 - Angular2 和 Bootstrap答案

【问题标题】：Dynamic multi-columns dropdown - Angular2 and Bootstrap动态多列下拉菜单 - Angular2 和 Bootstrap
【发布时间】：2017-04-25 14:36:17
【问题描述】：

如何创建动态多列下拉列表。我正在使用 angular2 并寻找类似http://alijafarian.com/bootstrap-multi-column-dropdown-menu/

但是这里我们将列固定为 3，列表项硬编码。在我的情况下，我有一个动态列表，希望在一列中显示 5 个项目。例如：如果列表包含 20 个项目，那么我们会有 4 列，每列 5 项。我的代码如下所示

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

我现在正在使用 ngFor 指令循环浏览艺术家列表并将其显示在单列中。但想根据列表的大小在多列中显示它。

【问题讨论】：

标签： css twitter-bootstrap angular twitter-bootstrap-3

【解决方案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

【讨论】：