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

发布时间：2020-12-17 08:20:35 所属栏目：安全来源：网络整理

导读：在 ng-bootstrap NgbDropdown中,您将如何显示所选按钮的文本,以便用户选择的项目替换最初显示的默认文本？在下面的示例中,目标是显示用户选择的任何排序选项. div ngbDropdown class="d-inline-block" button class="btn btn-outline-primary" id="sortMenu

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

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!