时间戳

首页 > 解决方案 > angular 5 bootstrap-select：selectpicker 不是函数

bootstrap-4 - angular 5 bootstrap-select：selectpicker 不是函数

问题描述

我想为 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 和 angular 组件文件内容。

如果我添加：@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-4angular5bootstrap-select

解决方案

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

// 仅使用 selectpicker 类设置样式

$('.selectpicker').selectpicker();

          (or)

// 为所有选择设置样式

$('select').selectpicker();

推荐阅读