ngx-bootstrap下拉列表未在Angular 5項目中打開

Question

我知道這個問題已被要求用於許多不同的角度/ ngx-bootstrap配置，但由於我找不到任何有用的答案，我決定打開這個問題。

我正在嘗試使用ngx-boostrap集成一個bootstrap下拉組件：

的package.json

 "ngx-bootstrap": "^2.0.2", 

在我的index.html的頭部

link href =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel =”stylesheet“

在我的app.module.ts中

import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    BsDropdownModule.forRoot()
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

然后我有一個子模塊，我嘗試加載下拉列表：

submodule.component.html

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

下拉按鈕顯示，但單擊它時沒有任何反應。 我使用檢查器檢查了DOM，下拉列表的內容仍為空。

我該怎么做才能使這個下拉列表工作？

編輯

我不知道怎么做，但在玩完進口之后它最終起作用了。

我在我的子模塊中移回了BsDropdownModule的導入（它在開始時沒有工作）並且它有效。 當我打開這個問題時，我想我犯了一個愚蠢的錯誤，但我找不到什么。 我保持開放，以防有人幫助...

Answer 1

您是否告訴您的按鈕實際顯示下拉列表？ 你需要一個[isOpen] =“whatever”，然后可能是另一個按鈕，服務，鏈接，無論你在哪里切換whatever變量，就像這里的例子一樣。

Answer 2

希望你正確使用selector: 'demo-dropdown-basic'將你的component.ts包含在父組件的html中，如<demo-dropdown-basic></demo-dropdown-basic>