ng-bootstrap 在 angular 的下拉菜单中不起作用

Question

我想在我的下拉列表中使用 ng-bootstrap，但它不起作用。我在 app.module.ts 中导入了 NgbModule。我在下面附上了图片。

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">

有机商店

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" routerLink="/">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/shopping-cart">Shopping Cart</a>
  </li>
  <li ngbDropDown class="nav-item dropdown">
    <a ngbDropdownToggle class="nav-link dropdown-toggle"  id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Username</a>
    <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
      <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
      <a class="dropdown-item" routerLink="/admin/orders">Manage Orders</a>
      <a class="dropdown-item" routerLink="/admin/products">Manage Products</a>
      <a class="dropdown-item" routerLink="">Log Out</a>
    </div>

  </li>

Output after the above code

Answer 1

在您的模块中，将 ngbmodule 添加为 root，并将其添加到 providers。

import { NgbModule, NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";


   imports: [    
        NgbModule.forRoot(),
    ],
   providers: [NgbActiveModal],

ng-bootstrap 在 angular 的下拉菜单中不起作用

ng-bootstrap not working in dropdown in angular

ng-bootstrap

angular