【发布时间】：2019-01-31 06:02:57
【问题描述】：
更新：进一步挖掘后，我尝试了常规的 bootstrap 4 下拉菜单，结果相同。下拉菜单未打开。我相信这意味着 selectpicker 类或 bootstrap-select 依赖项不会有问题。使用 ng-bootstrap 下拉菜单时也有同样的问题。
更新 2：Ngx-dropdown 确实有效，并且是我能找到的唯一仍然有效的下拉菜单，但它的操作方式不同。我希望这有助于找出原因。
更新 3：已确认这不仅仅是在 Chrome 中工作时的问题。 firefox 和 safari 也有同样的问题。
升级到 Angular 6 后，引导选择元素不再下拉，除非我删除 class="selectpicker"。小下拉箭头也不再显示。
我已经尝试降级引导选择选择器，升级到最新版本，检查 jquery 是否更新，确保选择选择器安装了它需要的依赖项和版本（我认为 jquery 大于 1.8.1）
在尝试手动强制下拉时它也不起作用。 （见下文）
使用 class="selectpicker"
在更新到 Angular 6 和更新依赖项之前（从生产中提取）
bootstrap-select 和常规 bootstrap 4 下拉菜单显示的问题。
通过按钮强制下拉：
使用 ngx-select-dropdown 工作：
用于给定选择器的代码：
<select class="selectpicker" ngDefaultControl name="selectTypes" (change)="onChangeTypes($event)" data-style="btn btn-danger btn-block"
title="Test Type">
<option *ngFor="let type of testTypes; index as i" [attr.data-index]="i" value=i>{{type}}</option>
</select>
初始化代码并再次刷新数据加载
setTimeout(function() {
if ($('.selectpicker').length !== 0) {
$('.selectpicker').selectpicker({
iconBase: 'ti',
tickIcon: 'ti-check'
});
}
$('.selectpicker').selectpicker('refresh');
}, 100);
其他下拉菜单的代码（常规下拉菜单、bootstrap 4 更新下拉菜单、ngx 下拉菜单）
<div class="btn-group dropdown">
<button type="button" (click)="dropdownToggle()" class="btn btn-block btn-danger dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Regular bootstrap 4 dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
Regular
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#paper">Action</a></li>
<li><a href="#paper">Another action</a></li>
<li><a href="#paper">Something else here</a></li>
<li class="divider"></li>
<li><a href="#paper">Separated link</a></li>
<li class="divider"></li>
<li><a href="#paper">One more separated link</a></li>
</ul>
</div>
<br/>
<ngx-select-dropdown class="selectpicker dropdown btn-group btn-block dropdown-toggle btn btn-info" [multiple]="true" [config]="{height: auto, search:false}"
[options]="['first', 'second', 'third']"></ngx-select-dropdown>
最后是 package.json：
"dependencies": {
"@angular/animations": "^6.1.4",
"@angular/common": "^6.1.4",
"@angular/compiler": "6.1.1",
"@angular/core": "^6.1.4",
"@angular/forms": "^6.1.4",
"@angular/http": "^6.1.4",
"@angular/platform-browser": "^6.1.4",
"@angular/platform-browser-dynamic": "^6.1.4",
"@angular/platform-server": "^6.1.4",
"@angular/router": "^6.1.4",
"@ng-bootstrap/ng-bootstrap": "^3.0.0",
"@ngui/map": "0.30.3",
"@sendgrid/mail": "^6.3.1",
"@types/googlemaps": "3.30.11",
"angular2-datetimepicker": "^1.1.1",
"angularfire2": "^5.0.0-rc.3",
"bootstrap": "4.1.3",
"bootstrap-notify": "3.1.3",
"bootstrap-select": "1.13.1",
"bootstrap-switch": "3.3.4",
"chart.js": "^2.7.2",
"chart.piecelabel.js": "^0.15.0",
"chartist": "0.11.0",
"chartist-plugin-zoom": "0.4.1",
"chartjs-plugin-zoom": "0.6.4",
"core-js": "2.5.7",
"datatables": "1.10.18",
"datatables.net-bs": "1.10.19",
"datatables.net-responsive": "2.2.3",
"datatables.net-select": "^1.2.5",
"datatables.net-select-bs": "^1.2.5",
"easy-pie-chart": "2.1.7",
"enhanced-resolve": "^4.1.0",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"firebase": "^5.4.0",
"firebase-admin": "^6.0.0",
"firebase-functions": "^2.0.5",
"fullcalendar": "3.9.0",
"jasny-bootstrap": "3.1.3",
"jquery": "^3.3.1",
"ng-circle-progress": "^1.2.0",
"ng2-charts": "^1.6.0",
"nodemailer": "^4.6.7",
"nouislider": "11.1.0",
"npm": "^6.0.1",
"popper.js": "^1.14.3",
"rxjs": "^6.2.2",
"stripe": "^6.2.1",
"twitter-bootstrap-wizard": "^1.2.0",
"web-animations-js": "2.3.1",
"xlsx": "^0.13.4",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "^6.1.5",
"@angular/compiler-cli": "6.1.1",
"@types/bootstrap": "4.1.2",
"@types/chartist": "0.9.42",
"@types/datatables.net-select": "^1.2.4",
"@types/jasmine": "2.8.8",
"@types/jquery": "3.3.6",
"@types/node": "10.7.1",
"codelyzer": "4.4.4",
"jasmine-core": "3.2.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "3.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "2.0.1",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.3.1",
"protractor": "5.4.0",
"ts-node": "7.0.1",
"tslint": "5.11.0",
"typescript": ">=2.7.2 <2.10"
},
我真的很感激任何关于如何修复下拉/选择选择器元素的帮助。具有讽刺意味的是，它是我们平台中最常用的元素之一，升级到 Angular 6 后它们都不起作用。
【问题讨论】：
-
我遇到了类似的问题，但从未解决过。我刚刚为那个元素使用了 Material design。
-
我希望我能这么轻松地解决它......我们跨越多个环境。你最终使用了什么？
-
我喜欢材料设计，但有一些单独的库很适合。我打赌你可以编辑它的库来解决这个问题，但我不知道你是否想弄乱依赖关系。
-
我想避免依赖库自定义，因为这可能会在我们更新时引起问题。不过确实给了我这个想法。它可能是从另一个导致冲突的依赖项更新的类名。
标签： javascript jquery angular bootstrap-4 dropdown