如何创建与 Angular 4/5 兼容的多列下拉列表？答案

【问题标题】：How to create a multi column dropdown list compatible with Angular 4/5?如何创建与 Angular 4/5 兼容的多列下拉列表？
【发布时间】：2018-01-08 02:54:52
【问题描述】：

我正在开发一个 Angular 应用程序，我必须在其中创建一个多列下拉列表，如下图所示。

虽然我能够在 jQuery 的 selectMenu 小部件的帮助下开发它，但后来在使用这种方式时，当我使用 observables 从存储中获取异步数据时，这个小部件无法正常工作。虽然当我通过硬编码数组提供数据时，这个小部件工作正常。

接下来，我寻找另一种选择。我找到了 Angular Material 下拉组件，但我不明白如何在该组件中创建多列。

我还发现语义 UI 下拉组件提供类似于下拉小部件的功能。但是忘记创建下拉列表，由于一些 jQuery 问题，我什至无法启动该下拉列表。我从许多来源中读到我不应该将 jQuery 与 Angular 一起使用，但事实是我目前没有解决方案或替代方法来创建该小部件。那么，任何人都可以帮助我如何创建这样一个多列下拉列表。

【问题讨论】：

标签： angular twitter-bootstrap angular-material dropdown semantic-ui

【解决方案1】：

引导 4.0

您可以通过Bootstrap flexbox container 在 ng-bootstrap 下拉列表中创建列。我能够在下面的代码示例中复制所需的下拉列表。

请注意，需要指定具有 ngbDropdownMenu 指令的元素的宽度。此外，需要额外的 CSS 才能很好地对齐：)

使用 Bootstrap flexbox 容器在所需的下拉列表中实现布局非常简单。其他布局的 YMMV。

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1" style="width: 600px;">
    <div class="d-flex justify-content-between">
      <div>
        PREFERRED OPTIONS
      </div>
      <div>
        PRICE
      </div>
    </div>
    <div ngbDropdownItem class="d-flex justify-content-between">
      <div>
        L
      </div>
      <div>
        Standard Screw Adjustment
      </div>
      <div>
        $0.00
      </div>
    </div>
    <div class="d-flex justify-content-between">
      <div>
        STANDARD OPTIONS
      </div>
      <div>
        PRICE
      </div>
    </div>
    <div ngbDropdownItem class="d-flex justify-content-between">
      <div>
        C
      </div>
      <div>
        Tamper Resistant - Factory Set
      </div>
      <div>
        $5.00
      </div>
    </div>
    <div ngbDropdownItem class="d-flex justify-content-between">
      <div>
        K
      </div>
      <div>
        Handknob
      </div>
      <div>
        $6.00
      </div>
    </div>
    <div class="d-flex justify-content-between">
      <div>
        ADDITIONAL OPTIONS
      </div>
      <div>
        PRICE
      </div>
    </div>
    <div ngbDropdownItem class="d-flex justify-content-between">
      <div>
        F
      </div>
      <div>
        Hex Head Screw with Locknut
      </div>
      <div>
        $-4.00
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用 ng-bootstrap 并自定义下拉组件 'ngbDropdown' ：

【讨论】：