ドロップダウンから選択項目を表示するようにNgbDropdownを設定する方法

Question

ng-bootstrap NgbDropdownには、選択したボタンのテキストをどのように表示して、最初に表示されたデフォルトのテキストをユーザーが選択したアイテムに置き換えますか？

以下の例では、ユーザーが選択するソートオプションを表示することを目標としています。

<div ngbDropdown class="d-inline-block"> 

    <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>Sort by...</button> 

    <div class="dropdown-menu" aria-labelledby="sortMenu"> 
    <button class="dropdown-item">Year</button> 
    <button class="dropdown-item">Title</button> 
    <button class="dropdown-item">Author</button> 
    </div> 

</div> 

ありがとうございました！

Answer 1

。

例コンポーネント：

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

} 

Answer 2

私は（blurイベントを使用すると、Firefoxで動作しない）選択されたボタンの上のクリックイベントにフックすることによって、これを解決 - Plunkr demo

コンポーネント：

export class NgbdDropdownBasic { 
    displayMessage = "Sort by..."; 
    sortOptions = ["Balance", "Company", "Last Name"] 

    changeMessage(selectedItem: string){ 
     this.displayMessage = "Sort by " + selectedItem; 
    } 
} 

テンプレートとNgbDropdown：this plunkrで実証

<div ngbDropdown class="d-inline-block"> 

    <button class="btn btn-outline-primary" 
      id="dropdownMenu1" 
      ngbDropdownToggle > 

    {{displayMessage}} 

    </button> 

    <div class="dropdown-menu" id="options" aria-labelledby="dropdownMenu1"> 
     <div *ngFor="let option of sortOptions"> 
     <button class="dropdown-item" 
       id="option" on-click="changeMessage(option)">{{option}}</button> 

     </div> 
    </div> 
    </div>