角度多选下拉菜单

Question

我想使用Bootstrap 4设计角度的多选下拉功能。下图是下图。

以下是我到目前为止的实现。

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

我有两个问题

1. 如果在selected上添加属性，则不会选择元素option

我知道这种情况的发生是因为我不使用jQuery，并且我不想添加JQuery，因为在Angular中不建议这样做。

我的问题是

1. 在有或没有引导程序4的情况下，在Angular中实现多个下拉UI组件的最简单选择是什么？

Answer 1

我尝试了您的代码，但是selected属性对我来说很好。

我在w3schools创建了一个代码片段，表明它可以正常工作：链接到代码片段

由于控件处于非活动状态，因此所选选项显示为灰色，因此似乎未选中。如果添加了另一个但未选择的选项，则可以看到区别。我在这里创建了另一个代码段。

我的简化代码如下所示：

<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，在这里用您的数据演示该组件

希望这对您有所帮助。