ng-bootstrap ngbDropdown無法在角度4中工作

Question

在我的角度4應用程序是ng-bootstrap的ngbDropdown-Element無法正常工作。

我為這種情況安裝了以下npm模塊：

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "bootstrap": "4.0.0-alpha.6", "bootstrap-sass": "^3.3.7",

我的app.module.ts看起來像這樣：

import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";

import { AppComponent } from "./app.component";
import { FileitHeaderComponent } from "./fileit-header/fileit-header.component";
import {TranslateModule} from "ng2-translate";
import { CCACampaignComponent } from "./cca-campaign/cca-campaign.component";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";


@NgModule({
  declarations: [
    AppComponent,
    FileitHeaderComponent,
    CCACampaignComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TranslateModule.forRoot(),
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在CCA Campaign中我試圖使用ng-bootstrap的演示：

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <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>

但遺憾的是，這段代碼的結果非常糟糕：

當我點擊它時沒有任何反應......

Answer 1

@Philipp只需對您的HTML代碼稍作修改：

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1" 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是添加到“dropdown-menu”div的屬性。

Answer 2

TL;博士; 安裝Bootstrap 4 CSS。

ng-bootstrap需要Bootstrap 4，如“入門”頁面所述 。 出於某種原因，你有"bootstrap-sass": "^3.3.7"所以看起來你正在混合Bootstrap版本，並且可能正在有效地使用Bootstrap 3。

使用Bootstrap 4 CSS可以很好地完成演示頁面上顯示的內容（以及可以從中進行分析的掠奪者）： https ：//ng-bootstrap.github.io/#/components/dropdown