将Angular 5.2升级到Angular 6、Bootstrap 4、jquery 3.3.1后，Bootstrap 4 dropdown和Bootstrap-select dropdown不再下拉

Question

更新:在进一步挖掘之后，我尝试了一个常规的bootstrap 4下拉菜单，结果相同。下拉列表未打开。我相信这意味着对于selectpicker类或者特定的bootstrap-select依赖关系来说，这不是一个问题。在使用ng-bootstrap dropdown时也有同样的问题。

更新2: Ngx-dropdown确实可以工作，也是我能找到的唯一可以工作的dropdown，但它的操作方式不同。我希望这能帮你找出原因。

更新3:我已经确认这不仅仅是在Chrome中工作时的一个问题。在firefox和safari中也存在同样的问题。

在升级到Angular 6之后，bootstrap-select元素不再下拉，除非我删除了“class=”选择器。小的下拉箭头也不再显示。

我尝试过将bootstrap selectpicker降级，升级到最新版本，检查jquery是否更新，确保selectpicker安装了所需的依赖项和版本(我认为jquery高于1.8.1 )

当尝试手动强制下拉菜单时，它也不起作用。(见下文)

使用class=“选择器”

​

​

没有class=的“选择器”

​

在更新到angular 6和更新依赖项之前(从生产中拉出)

​

bootstrap-select和常规bootstrap 4下拉列表都显示了问题。

​

通过按钮强制下拉：

​

​

在ngx-select-dropdown工作的情况下：

​

​

用于给定select选择器的代码：

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

init和在数据加载时刷新的代码

          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"
  },

我真的很想得到任何帮助，弄清楚如何修复dropdown/selectpicker元素。具有讽刺意味的是，它是我们平台中最常用的元素之一，在升级到angular 6之后，它们都不能工作。

Answer 1

我检查了您使用的引导选择库。看起来1.13中有一些错误，导致下拉失败。我还没能找到原因，老实说，我也不确定其他的下拉问题(我的赌注是相同的bootstrap-select库，当我移除它时，它们看起来是工作的)，但我会尝试将bootstrap-select降级到1.12.2。希望这能解决你的主要问题！