Question

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

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

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

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

Answer 1

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

Answer 2

您可以使用ng-bootstrap并自定义下拉组件＆＃39; ngbDropdown＆＃39; ：

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

2 个答案: