angular 5 bootstrap-select：selectpicker不是一个函数

Question

我想为angular 5应用程序安装npm bootstrap-select所以我使用npm安装它

npm install bootstrap-select

然后我安装了所需的依赖项：

npm install jquery
npm install popper.js --save

角cli.json：

 "apps": [
    {
      "styles": [
        "styles.css"
      ],
      "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ],
    }
  ],

和我的package.json是（我从列表中删除了一些包）：

"dependencies": { 
    (...)
    "@ng-bootstrap/ng-bootstrap": "^1.1.0",
    "bootstrap": "^4.1.1",
    "bootstrap-select": "^1.13.2",
    "jquery": "^3.3.1",
    "ng-multiselect-dropdown": "^0.2.1",
    "popper.js": "^1.14.4",
}

在html文件中，我添加了代码：

<ng-template #modalWindow let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Options</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">     
    <select id="myspID" #selectPickerRef class="selectpicker form-control" multiple
        title="Select a number">
      <option>Opt1</option>
      <option>Opt2</option>
      <option>Opt3</option>
    </select>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

添加的选择元素没有样式，它看起来像一个带有列出选项的简单边框矩形。它甚至不是下拉列表。

这是一个角度组件元素：

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import * as $ from 'jquery';

@Component({
  selector: 'app-modal-model-generator',
  templateUrl: './modal-model-generator.component.html',
  styleUrls: ['./modal-model-generator.component.css']
})
export class ModalModelGeneratorComponent implements OnInit {

  closeResult: string;

  @ViewChild('modalWindow')
  modalWindowRef: HTMLElement;

  @ViewChild('selectPickerRef')
  selectPickerEL: any;

  constructor(
    private modalService: NgbModal
  ) {}

  runBootstrapSelects(): void {
    //this.selectPickerEL.selectpicker();
    //$('.selectpicker').selectpicker();
    //$('select').selectpicker();
    $('#myspID').selectpicker();  //<--error is thrown here
  }

  openWindowCustomClass(params) {

    this.modalService.open(this.modalWindowRef, {
      windowClass: 'dark-modal',
      centered: true,
      size: 'lg'
    });
    this.runBootstrapSelects();
  }
}

有一个错误：

$(...).selectpicker is not a function

在runBootstrapSelects()组件方法中。 编辑： 已添加angular-cli.json和角度组件文件内容。 如果我添加：@import“~bootstrap-select / dist / css / bootstrap-select.css”;到style.css文件：

@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-select/dist/css/bootstrap-select.css";

那么<select>项目不会显示在页面上 但是一个文件：/node_modules/bootstrap-select/tests/bootstrap4.html包含在bootstrap-select node_modules文件夹中。 Bootstrap4.html文件包含bootstrap-select下拉列表，其显示为样式。

Answer 1

是的，因为它仅在您使用jquery conditon调用该插件类“selectpicker”时才有效。请确保您在jquery条件中调用该元素类名称或元素名称。

//要设置样式，只选择selectpicker类

$（ 'selectpicker'）selectpicker（）。

          (or)

//设置所有选择的样式

$（ '选择'）selectpicker（）。