ng-bootstrap ngbDropdownが動作しません。角度4

Question

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

注：私はhereの答えにアップグレードし、ブートストラップを4-alphaにアップグレードしましたが、動作しません。

"@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コード：ngbModuleがあまりにも輸入されて、私のapp.module.tsで

<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> 

以下は私のpackage.jsonファイルです。

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

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

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

任意の入力がはるかに高く評価されています。

Answer 1

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

Answer 2

@Maddy ちょうどあなたの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プロパティは、 "ドロップダウンメニュー" のdivに追加されます。