Question

Bootstrap下拉列表不起作用

app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [
...
    NgbModule.forRoot(),
...
]
...

dashboard.component.html

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        Select Dashboard
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="javascript:void(0)" (click)="selectDashboard('d1')">Dashboard1</a>
        <a class="dropdown-item" href="javascript:void(0)" (click)="selectDashboard('d2')">Dashboard2</a>
    </div>
</div>

scss似乎工作 - 按钮格式正常，但点击它不起作用。请帮忙。

Answer 1

不确定您希望它如何工作，因为您似乎没有使用ng-bootstrap指令的{em>任何（ngbDropdown， ngbDropdownToggle）。如果您查看official demo site for dropdowns，您会看到这个简单的标记：

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

您甚至可以从演示网站分叉一个plunker并看到此代码正常工作：http://plnkr.co/edit/lfsIdlSo5wIkmxP01uaQ?p=preview

解决您的问题：

确保您实际使用的是https://ng-bootstrap.github.io/#/components/dropdown
检查样本plunker并将您的代码与此处的代码进行比较：http://plnkr.co/edit/lfsIdlSo5wIkmxP01uaQ?p=preview enter link description here

Answer 2

似乎我一直在阅读错误的文档。感谢JB Nizet

您正在阅读Bootstrap基于jQuery的组件的文档，但您想使用ng-bootstrap的基于角度的组件。它们看起来一样，依赖于相同的bootstrap CSS，但使用和操作它们的方式并不相同。 - JB Nizet

dashboard.component.ts应如下所示：

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

Angular 4 Bootstrap 4.0.0.alpha-6不起作用

2 个答案: