угловой 5 начальной загрузки-выбора: выборщик не является функцией - PullRequest
Новая
       23

угловой 5 начальной загрузки-выбора: выборщик не является функцией

0 голосов
/ 14 сентября 2018

Я хотел установить npm bootstrap-select для приложения angular 5 Итак, я установил его, используя npm 

npm install bootstrap-select

Затем я установил необходимые зависимости: 

npm install jquery
npm install popper.js --save

angular-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() метод компонента, EDIT: добавлен файл 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, которые показаны в стиле.

1 Ответ

0 голосов
/ 14 сентября 2018

Да, потому что он работает только тогда, когда вы вызываете этот класс плагина " selectpicker ", используя условие jquery. Убедитесь, что вы вызываете имя этого класса элемента или имя элемента в состоянии jquery.

// Стилизовать только выделения с помощью класса selectpicker

$ ('. Selectpicker'). Selectpicker (); 

          (or)

// Стилизовать все выделения

$( 'выберите') selectpicker ();.

...