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;
 }

}

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

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbdDropdownBasic } from './dropdown-basic';＆lt; - 正在编译错误

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>

NgbDropdown点击事件无效

1 个答案: