Angular 角度多选下拉列表

我想使用Bootstrap4在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> 

雇员特权
芥末
烧烤

我有两个问题

如果在

选项

我知道这是因为我不使用jQuery，也不想添加jQuery，因为在Angular中不建议这样做

我的问题是

在Angular中实现多个下拉式UI组件的最简单选项是什么（带或不带引导4）

---

如果你正在使用材料设计，那么这将帮助你。 定义表单控件并将要显示的值放入其中 然后像这样定义下拉列表

<mat-select placeholder="Select Units" formControlName="unit">
                            <mat-option *ngFor="let unit ofUnit" [value]="unit.slug">
                              {{unit.unit_name}}
                            </mat-option>
                          </mat-select>

{{unit.unit_name}

此代码笔有一个引导4 multiselect，与您正在展示的内容非常相似。当我将select添加到第一个选项中时，例如：

<select class="custom-select" id="basic" multiple="multiple">
   <option value="cheese" selected>Cheese</option>
   <option value="tomatoes">Tomatoes</option>
   <option value="mozarella">Mozzarella</option>
   <option value="mushrooms">Mushrooms</option>
   <option value="pepperoni">Pepperoni</option>
   <option value="onions">Onions</option>
</select>

奶酪
西红柿
莫泽雷勒干酪
蘑菇
意大利 辣味 香肠
洋葱

---

它按预期工作。

我尝试了您的代码，但所选属性对我来说很好

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

芥末
烧烤
番茄酱
蛋黄酱

此外，我还发现了一个非常有效的角度组件：

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

---

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

您可以使用此功能。您所说的多下拉菜单是什么意思？像嵌套菜单还是树？如果它是一棵树，那么您可以尝试查看它，尝试使用stackblitz演示，但会导致错误TypeError:无法读取Unfinedh的属性“idField”，否则它在不同的计算机上工作正常。你使用哪种浏览器？您是否在网络选项卡中的开发工具或javascript控制台中收到任何错误？感谢您的回复。使用Chrome，并在Javascript控制台中出错。我以前尝试过一些用于multi-select的库，但ng multiselect下拉列表比其他库更适合。