在
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>
谢谢你的帮助！
在
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;
}
}
