ngx-bootstrap下拉列表未在Angular 5项目中打开

时间:2018-02-23 13:27:59

标签: angular twitter-bootstrap-3 ngx-bootstrap

我知道这个问题已被要求用于许多不同的角度/ 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 ="样式表"

在我的 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的导入(在开始时没有工作)并且它有效。当我打开这个问题时,我想我犯了一个愚蠢的错误,但我无法找到答案。我保持开放,以防有人帮助......

2 个答案:

答案 0 :(得分:0)

您是否告诉您的按钮实际显示下拉列表?您需要[isOpen] =“whatever”,然后可能需要另一个按钮,服务,链接,以及切换whatever变量的任何内容,如示例here中所示。

答案 1 :(得分:0)

希望您正确使用selector: 'demo-dropdown-basic' inn your component.ts并包含在父组件的html中,如<demo-dropdown-basic></demo-dropdown-basic>