Мой раскрывающийся класс bootstrap не может отображать раскрывающееся меню

Question

Я добавил следующий код в свой файл HTML для реализации раскрывающегося списка bootstrap, но я не вижу раскрывающегося списка.

HTML файл

      <div class="tools text-muted d-flex justify-content-around mr-4">
        <div class="pr-3 border-right">Filter</div>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Filter
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <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>
        </div>
        <fa-icon class="pr-3" [icon]="faChevronDown"></fa-icon>
      </div>
      <button type="button" class="btn btn-warning">Register</button>
    </div>

Я также добавил массив стилей bootstrap в angular. json:

 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/assets/js/custom.js"
            ]

Я не хочу видеть выпадающее меню здесь, я могу видеть кнопку, но не раскрывающееся меню.

Answer 1

Для выпадающих списков

Bootstrap требуется Поппер. js. Я не знаю, добавили ли вы его в свои зависимости в пакете. json, но если нет, добавьте его туда или добавьте через npm install. Вы можете посмотреть здесь . Если вы установили Popper. js, ваш angular. json должен выглядеть так:

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ]
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "src/assets/js/custom.js"
  ]

Answer 2

у меня работает, когда я просто добавляю ссылки на файл CDN в свой HTML документ (без использования чего-либо еще)