Выпадающий список не работает правильно. (Angular 8 и Boostrap) - PullRequest
0 голосов
/ 22 апреля 2020

У меня проблемы с отображением выпадающего меню и его параметров через директиву bootstrap ngbDropdown.

Используя этот пример документации:

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <button ngbDropdownItem>Action - 1</button>
      <button ngbDropdownItem>Another Action</button>
      <button ngbDropdownItem>Something else is here</button>
    </div>
  </div>

Отображает эти значения:

enter image description here

Я уже импортировал NgbDropdownModule и NgbModule в AppModule.

Я использую localy angular -cli: 8.3.26.

Мне кажется, я установил все пакеты:

  • "@ angular / animations": "^ 8.2.8"
  • "@ angular / common" : "^ 8.2.8"
  • "@ angular / compiler": "^ 8.2.8"
  • "@ angular / core": "^ 8.2.8"
  • "@ angular / forms": "~ 8.2.8"
  • "@ angular / platform-browser": "^ 8.2.8"
  • "@ angular / platform-browser-Dynami c ":" ^ 8.2.8 "
  • " @ angular / router ":" ^ 8.2.8 "
  • " @ ng-bootstrap / ng- bootstrap ":" ^ 5.3.1 "
  • " bootstrap ":" ^ 4.3.1 "
  • " core- js ":" ^ 3.6.5 "
  • " ngx-alerts ":" ^ 4.0.0 ",
  • " ngx- bootstrap ":" ^ 5.4.0 "
  • " rx js ":" ~ 6.5.4 "
  • " tslib ": зона" ^ 1.10.0 "
  • ". js ":" ~ 0.9.1 "

В документации Boostrap: https://ng-bootstrap.github.io/# / компоненты / выпадающий список / примеры пример стекаблица находится в версии 9, и я должен использовать версию 8.

Нужна помощь? Благодарен.

РЕДАКТИРОВАТЬ:

РАЗРЕШЕНО!

Необходимо импортировать поппер. js и jquery по индексу. html, как это: enter image description here

1 Ответ

0 голосов
/ 22 апреля 2020

Можете ли вы попробовать что-то вроде этого? Мой код был написан в Angular 8 с ng- bootstrap версии 5.x, и он работает даже на Angular 9 / ng- bootstrap 6.x

<div ngbDropdown #myDrop1="ngbDropdown" class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownAnchor (focus)="myDrop1.open()">Toggle dropdown</button>
    <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <button class="dropdown-item" ngbDropdownItem>Action - 1</button>
      <button class="dropdown-item" ngbDropdownItem>Another Action</button>
      <button class="dropdown-item" ngbDropdownItem>Something else is here</button>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...