web-dev-qa-db-ja.com

ドロップダウンから選択したアイテムを表示するようにNgbDropdownを構成する方法

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>

ご協力いただきありがとうございます！

angularng-bootstrap
10
TrumanCode

this plunkr で実証されています。

サンプルコンポーネント：

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

}
16
Rob Mullins

選択したボタンのオンクリックイベントにフックすることでこれを解決しました（Firefoxではblurイベントを使用しても機能しません）- Plunkr demo

コンポーネント：

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

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

NgbDropdownを使用したテンプレート：

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