web-dev-qa-db-ja.com

ng-bootstrap ngbDropdownが機能しないAngular 4

ngドロップダウンが機能していません。

注：私は答え here をたどり、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
]

ブートストラップボタンとテキスト入力が機能し、ドロップダウンがクリックで機能しないことを除いて、すべてのスタイルが適用されます。

enter image description here

どんな入力でも大歓迎です。

angularbootstrap-4ng-bootstrap
13
Maddy

NgbModuleも別のモジュール内にインポートする必要があります。クレジット：HaveSpacesuit

18
Maddy

使用するngbモジュールを追加するには、NgbModuleをインポートする必要があります...

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

@マディ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>

ngbDropdownMenは、「ドロップダウンメニュー」divに追加されるプロパティです。

1
Yuvraj Chauhan