Konfigurieren NgbDropdown anzeigen das ausgewählte Element aus der dropdown -

In ng-bootstrap NgbDropdown, wie würden Sie den text der ausgewählten Schaltfläche, so dass was auch immer Element der Benutzer ausgewählt hat, ersetzt die Standard-text zunächst gezeigt?

Im Beispiel unten, das Ziel ist, zu zeigen, was die Sortierung-option der Benutzer auswählt.

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

Vielen Dank für Ihre Hilfe!

InformationsquelleAutor TrumanCode | 2017-02-10

  1. 15

    Gezeigt, in diese plunkr.

    Beispiel-Komponente:

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

}
    Ich kann nicht kommentieren, die direkt zur Lösung, die Sie geschrieben, weil ich nicht genug Ruf auf diesem Konto noch... (wenn Sie Sie akzeptieren meine Antwort, dass hilft). Aber Sie haben Ihre *ngFor an der falschen Stelle, so dass doppelte div-tag zu, wenn alle Sie haben wollen mehrere sind die Tasten. Sie sollten auch eine Eckige binden, um das click-Ereignis verwenden (klicken Sie) auf den button anstelle von "HTML" auf-klicken Sie auf " für Ihre Veranstaltung. Schließlich, wenn Sie verwenden möchten eine 'id' für jede Schaltfläche, die Sie sollten, Sie einzigartig machen. Derzeit alle buttons haben den gleichen id-Wert, weil der *ngFor.

    InformationsquelleAutor Rob Mullins

  2. 1

    Ich löste dies durch Einhängen in das on-click-Ereignis der Schaltfläche ausgewählte ( mit dem blur-event funktioniert nicht in Firefox) - Plunkr demo

    Bauteil:

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

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

    Die Vorlage mit 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>

    InformationsquelleAutor TrumanCode

Schreibe einen Kommentar