角度多选下拉菜单答案

【问题标题】：Angular multi select dropdown角度多选下拉菜单
【发布时间】：2019-08-03 19:09:30
【问题描述】：

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

我有两个问题

如果我在option 上添加selected 属性，则未选择元素

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

我的问题是

在 Angular 中使用或不使用 bootstrap 4 实现多下拉 UI 组件的最简单选择是什么

【问题讨论】：

你可以用这个npmjs.com/package/ng-multiselect-dropdown
多下拉菜单是什么意思？像嵌套菜单或树？如果它是一棵树，那么您可以尝试查看此material.angular.io/components/tree/overview

标签： angular bootstrap-4 ng-bootstrap

【解决方案1】：

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

我在 w3schools 创建了一个 sn-p，表明它可以工作：link to snippet

看起来它没有被选中，因为选中的选项是灰色的，因为控件处于非活动状态。如果您添加另一个未选择的选项，您可以看到差异。我创建了另一个 sn-p 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

我创建了一个堆栈闪电战，用您的数据演示组件here

我希望这对您有所帮助。

【讨论】：

尝试使用您的 stackblitz 演示但导致 RROR TypeError: Cannot read property 'idField' of undefined
在这里它在不同的计算机上工作得很好。您使用哪种浏览器？您是否在网络选项卡或 JavaScript 控制台的开发工具中收到任何错误？
感谢您的友好回复。使用 Chrome，在 Javascript 控制台中出现错误
太棒了。我之前尝试过一些用于多选的库，但 ng-multiselect-dropdown 比其他库更适合。

【解决方案2】：

如果您使用的是材料设计，那么这将对您有所帮助。定义表单控件并将要显示的值放在那里然后像这样定义下拉列表

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

【讨论】：

【解决方案3】：

这个 codepen 有一个 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>

它按预期工作。

【讨论】：