Как настроить 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>

Спасибо за вашу помощь!


angular ng-bootstrap
person TrumanCode    schedule 10.02.2017    source источник

Ответы (3)


arrow_upward
29
arrow_downward

Демонстрируется в этом 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;
  }

}
person Rob Mullins    schedule 11.02.2017
comment
Я не могу напрямую комментировать опубликованное вами решение, потому что у меня еще недостаточно репутации в этой учетной записи... (если вы примете мой ответ, это поможет). Но у вас есть *ngFor не в том месте, так как это также будет дублировать тег div, когда все, что вам нужно, это несколько кнопок. Кроме того, у вас должна быть привязка Angular к событию щелчка с использованием (щелчка) на кнопке вместо HTML «при нажатии» для вашего события. Наконец, если вы хотите использовать «id» для каждой кнопки, вы должны сделать их уникальными. В настоящее время все ваши кнопки будут иметь одинаковое значение идентификатора из-за *ngFor. - person Rob Mullins; 11.02.2017

arrow_upward
3
arrow_downward

Я решил эту проблему, подключившись к событию нажатия выбранной кнопки (использование события размытия не работает в Firefox) — Демонстрация плункра

Компонент:

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>
person TrumanCode    schedule 11.02.2017

arrow_upward
0
arrow_downward

Я боролся с ngbDropdown. И я увидел этот блог и назначил. Но это не сработало. Через некоторое время я нашел решение. Вместо class="dropdown-menu" я использовал директиву ngbDropdownMenu. Код такой же, как показано ниже.

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

     }

Спасибо за ваше чтение.

person Happy Creater    schedule 17.05.2021