Angular 多选下拉菜单

Question

我想使用 bootstrap 4 以 Angular 设计多选下拉功能。以下是下图。



以下是我目前的实现。

             <div class="form-group">
                      <label>Employee privilege</label>
                      <select id="employeePrivelege" data-style="btn-default" 
                      class="selectpicker form-control" 
                      formControlName="employeePriveleges"
                      multiple data-max-options="2">      
                        <option selected>Mustard</option>
                        <option selected>Barbecue</option>
                          </select>
                    </div> 

我有两个问题

如果在 selected

上添加 option 属性，则不会选择元素

我知道这是因为我不使用 jQuery 并且我不想添加 JQuery，因为在 Angular 中不推荐这样做。

我的问题是

使用或不使用 bootstrap 4

在 Angular 中实现多下拉 UI 组件的最简单选项是什么

Answer 1

我试过你的代码，但 selected 属性对我来说很好用。

我在 w3schools 创建了一个片段，表明它有效:link to snippet

看起来它没有被选中，因为选中的选项是灰色的，因为控件处于非事件状态。如果您添加另一个未选中的选项，您可以看到不同之处。我创建了另一个片段 here 。

我的简化代码如下所示:

<select name="Sauces" multiple>
  <option value="Mustard">Mustard</option>
  <option selected value="Barbecue">Barbecue</option>
  <option value="Ketchup">Ketchup</option>
  <option selected value="Mayonaise">Mayonaise</option>
</select>

我还发现了一个很好用的 Angular 组件:

https://www.npmjs.com/package/ng-multiselect-dropdown

我创建了一个 stackblitz，用您的数据 here 演示了该组件

我希望这能帮助你进一步。