ng-bootstrap ngbDropdown无法正常工作Angular 4 [英] ng-bootstrap ngbDropdown not working Angular 4

问题描述

ng下拉菜单不起作用.

ng dropdowns are not working.

注意:我按照此处的答案进行了升级引导至4-alpha，但无法正常工作.

Note: I followed the answer here and upgraded bootstrap to 4-alpha, yet it's not working.

下面是我的package.json文件:

Below is my package.json file:

    "@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也被导入.

In my app.module.ts ngbModule is imported too.

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

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

Bootstrap按钮和文本输入正常工作，并且所有样式都适用，但单击时下拉菜单无效.

Bootstrap buttons and text inputs working and all the styles are applied, except for dropdown isn't working on click.

非常感谢任何输入.

推荐答案

NgbModule也必须导入到单独的模块中.鸣谢:HaveSpacesuit

NgbModule has to be imported within the separate module as well. Credits: HaveSpacesuit

这篇关于ng-bootstrap ngbDropdown无法正常工作Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！