как закрыть другие открытые выпадающие списки в ngbootstrap - PullRequest
Новая
       40

как закрыть другие открытые выпадающие списки в ngbootstrap

0 голосов
/ 12 марта 2019

Я использую ngbdropdown в нескольких элементах, как это 

<div *ngFor="let item of items" class="most parent div">
<div (click)="doSomething()">
   <div ngbDropdown [autoClose]="'outside'">
        <button ngbDropdownToggle (click)="$event.stopPropagation();">
            Toggle dropdown 1
         </button>
        <div ngbDropdownMenu>
        <button ngbDropdownItem>Action - 1</button>
   </div>
</div>
<div (click)="doSomething()">
   <div ngbDropdown [autoClose]="'outside'">>
        <button ngbDropdownToggle (click)="$event.stopPropagation();">
            Toggle dropdown 2
        </button>
        <div ngbDropdownMenu>
        <button ngbDropdownItem>Action - 1</button>
   </div>
</div>
</div>

По сути, некоторая функция вызывается из родительского элемента раскрывающегося списка.
Чтобы предотвратить вызов (щелчок) родительского элемента, я использую $event.stopPropagation().
Я использовал свойство autoclose для ngb-dropdown, чтобы закрыть его, когда пользователь щелкает за пределами его области.

все еще, когда я открываю второй выпадающий, 1-й не закрывается.

есть ли способ закрыть любой другой открытый раскрывающийся список, не вызывая click событие его родителя? в угловых? используя ngbDropDown?

1 Ответ

1 голос
/ 12 марта 2019

Этот пример может помочь вам 

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" ngbDropdownToggle>{{dropdownMenuName}}</button>
  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" (click)="ChangeSortOrder(sortOrder)">
      {{sortOrder}}
    </button>
  </div>
</div>


<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" ngbDropdownToggle>{{dropdownMenuName}}</button>
  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" (click)="ChangeSortOrder(sortOrder)">
      {{sortOrder}}
    </button>
  </div>
</div>

в component.ts 

  sortOrders: string[] = ['Year', 'Title', 'Author'];
  dropdownMenuName: string = 'Sort by...';

  ChangeSortOrder(newSortOrder: string) {
    this.dropdownMenuName = newSortOrder;
  }
...