如何配置 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

我通过连接到所选按钮的 on-click 事件解决了这个问题（使用 blur 事件在 Firefox 中不起作用）- 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>

Answer 2

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

}

Answer 3

我曾与 ngbDropdown 作斗争。我看到了这个博客并分配了。但它没有用。过了一会儿，我找到了解决办法。我使用了 ngbDropdownMenu 指令而不是 class="dropdown-menu"。代码同下

import {Component} from '@angular/core';
@Component({
     selector: 'dropdown-demo-sortby',
     template: `
                <div ngbDropdown class="d-inline-block">
                   <button class="btn btn-outline-primary" ngbDropdownToggle> 
                      {{selectedSortOrder}}</button>
                   <div ngbDropdownMenu>
                        <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;
             }

     }

感谢您的阅读。

如何配置 NgbDropdown 以显示下拉列表中的所选项目

How to configure NgbDropdown to display the selected item from the dropdown

ng-bootstrap

angular