ngx-bootstrap 下拉菜单未打开 angular 4 bootstrap 4

Question

我不知道这里发生了什么 - 我已经包含了 ngx-dropdown 代码，我认为根据文档是正确的：

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

app.module.ts

@NgModule({
  imports: [
    BsDropdownModule.forRoot(),
    ...
    ]

site.module.ts（这是包含 home 组件的模块）

@NgModule({
  imports: [
    BsDropdownModule,

我正在使用 angular-cli 并且包含 bootstrap 样式：

    "../node_modules/bootstrap/dist/css/bootstrap.min.css",

并且在 index.html 中我添加了一个片段让浏览器知道我正在使用 bootstrap 4:

<script>window.__theme = 'bs4';</script>
<app-root>Loading . . .</app-root>

出现按钮，控制台中没有显示任何错误。当我单击按钮时，我可以看到 dom 发生变化（"open" 和 "show" 被添加到样式中）。但是按钮下方没有任何内容打开 - 未显示菜单。

我不知道还能去哪里找

Answer 1

我也有这个问题。浪费了几个小时后，我发现了这个：

这是一个官方问题：

https://github.com/valor-software/ngx-bootstrap/issues/2413

Answer 2

我遇到了同样的问题。在我从 '@angular/platform-browser/animations' 导入 `import { BrowserAnimationsModule } 之后；'到 app.module.ts 并将 BrowserAnimationsModule 添加到 imports: [] 问题已解决。使用一些不必要的代码，您 app.module.ts 应该如下所示。我目前正在使用 Angular 9.0：

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
 ...
},
 imports:[
  BrowserAnimationsModule,
  BsDropdownModule.forRoot()
 ],
 ....
})

ngx-bootstrap 下拉菜单未打开 angular 4 bootstrap 4

ngx-bootstrap dropdown not opening angular 4 bootstrap 4

bootstrap-4

ngx-bootstrap

angular