NgbDropdownクリックイベントが機能しない

Question

私は何か小さいものを見逃していますが、これはちょうど働いていないので尋ねなければなりません。ボタンのクリックイベントは発生していません。私はdocumentationで始まり、次にhereをこれを私のページの1つにコピーしました。 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()をインポートしました。その後、私のコンポーネントで、私はあなたがあなたの内のdivに

ngbDropdownMenu 

タグが不足しているエラー

Answer 1

をコンパイル--getting

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbdDropdownBasic } from './dropdown-basic'; <を追加しました。する必要があります：

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