angular - NgbDropdown 点击事件不起作用

Question

我知道我错过了一些小东西，但不得不问，因为这不起作用。按钮的单击事件未触发。我从 documentation 开始然后移动here将此复制到我的其中一页中。当我添加 NgbdDropdownBasic 模块时，它会崩溃。如果我不添加它们，CSS 和按钮会正确渲染，但单击事件不会触发。不确定我一路上错过了什么？

import {Component} from '@angular/core';

@Component({
selector: 'dropdown-demo-sortby',
template: `
<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>
   {{selectedSortOrder}}</button>
  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" 
    (click)="ChangeSortOrder(sortOrder)" >{{sortOrder}}</button>
   </div>
  </div>
 `
 })
 export class DropdownDemoSortby {

 sortOrders: string[] = ["Year", "Title", "Author"];
 selectedSortOrder: string = "Sort by...";

  ChangeSortOrder(newSortOrder: string) { 
  this.selectedSortOrder = newSortOrder;
 }

}

我在我的应用程序模块中导入了 NgbModule.forRoot() 。然后在我的组件中添加了

从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}； import { NgbdDropdownBasic } from './dropdown-basic'; <--出现编译错误

Answer 1

你缺少一个

ngbDropdownMenu

标签在你的内部div中。应该是:

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>
   {{selectedSortOrder}}</button>
  <!-- Missing tag added below -->
  <div class="dropdown-menu" aria-labelledby="sortMenu" ngbDropdownMenu>
    <button class="dropdown-item" 
            *ngFor="let sortOrder of sortOrders" 
             (click)="ChangeSortOrder(sortOrder)">{{sortOrder}}
    </button>
  </div>
</div>