角度多选下拉菜单

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> 

我有2个问题

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

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

我的问题是

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

Answer 1

如果您使用的是材料设计，则可以为您提供帮助。 定义表单控件并在其中放置要显示的值 然后定义这样的下拉列表

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

Answer 2

此代码笔具有与您显示的内容非常相似的Bootstrap 4多选功能。 link。当我添加选择到第一个，如：

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

它按预期工作。