ng-bootstrap ngbDropdown 不工作 Angular 4

Question

ng 下拉菜单不起作用。

注意：我按照答案将 bootstrap 升级到 4-alpha，但它不起作用。

下面是我的 package.json 文件：

    "@angular/animations": "^4.3.0",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@angular/upgrade": "^4.3.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
    "@types/jquery": "^3.2.8",
    "angular-calendar": "^0.19.0",
    "angular2-ladda": "^1.2.1",
    "angular2-text-mask": "^8.0.2",
    "angular2-toaster": "^4.0.1",
    "animate.css": "^3.5.2",
    "bootstrap": "4.0.0-alpha.6"

html代码：

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1">
                    <button class="dropdown-item">Action - 1</button>
                    <button class="dropdown-item">Another Action</button>
                    <button class="dropdown-item">Something else is here</button>
                </div>
            </div>

在我的 app.module.ts 中也导入了 ngbModule。

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule.forRoot()
//more
]

Bootstrap 按钮和文本输入有效，所有样式均已应用，但下拉菜单在点击时无效。

非常感谢任何意见。

Answer 1

NgbModule 也必须在单独的模块中导入。学分：有太空服

Answer 2

@麦迪只需对您的 html 代码做一些小改动：

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1" ngbDropdownMenu >
                    <button class="dropdown-item">Action - 1</button>
                    <button class="dropdown-item">Another Action</button>
                    <button class="dropdown-item">Something else is here</button>
                </div>
            </div>

ngbDropdownMenu is property added to "dropdown-menu" div.

Answer 3

添加您使用的 ngb 模块，必须导入 NgbModule....

@NgModule({
  imports: [
        ..,
        NgbModule.forRoot()
   ],
  ...

ng-bootstrap ngbDropdown 不工作 Angular 4

ng-bootstrap ngbDropdown not working Angular 4

bootstrap-4

ng-bootstrap

angular