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

Question

I know this question has been asked for many different angular/ngx-bootstrap configurations but as I could not find any helpful answer yet, I decided to open this question.

I am trying to integrate a bootstrap dropdown component using ngx-boostrap:

package.json

 "ngx-bootstrap": "^2.0.2", 

In the head of my index.html

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

In my app.module.ts

import { BsDropdownModule } from 'ngx-bootstrap';

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

Then I have a submodule where I try to load the dropdown :

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>

The dropdown button shows up, but nothing happens when I click it. I checked the DOM using the inspector and the content of the dropdown is still empty.

What can I do to make this dropdown work ?

EDIT

I have no idea how, but after playing around with the imports it ended up working.

I moved back the import of BsDropdownModule in my submodule (which was not working in the begining) and it worked. I guess I made a silly mistake by the time I opened this question but I can't find what. I leave this open in case it may help someone...

Answer 1

Did you tell your button to actually show the dropdown? You need an [isOpen]="whatever", and then maybe another button, service, link, whatever where you toggle that whatever variable, like in the example here .

Answer 2

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