ngbDropdownMenu.close () для нескольких раскрывающихся списков - PullRequest
Новая
       43

ngbDropdownMenu.close () для нескольких раскрывающихся списков

0 голосов
/ 20 сентября 2019

Я работаю над проектом визуализатора данных.В этом проекте пользователи должны иметь возможность искать информацию, чтобы упростить быстрый поиск данных.Для этого я использую ngbDropdownMenu из NgBootstrap .Они нажимают кнопку, и появляется небольшое выпадающее меню, чтобы они могли по-новому взглянуть на них.

Когда появляется меню.Они дают имя и описание новому поиску и нажимают «отправить».Затем он создаст новый поиск и запустит событие, которое я сделал, чтобы я мог закрыть раскрывающееся меню NgbDropdownMenu.close();

HTML для раскрывающегося меню 

<div ngbDropdown  id="caseCodeDropdown" 
                  (openChange)="openChange($event);" 
                  class="input-group-append d-inline-block col-sm-1 px-0 mx-0">
    <button ngbDropdownToggle class="btn btn-sm btn-outline" type="button" >
         <i class="fal fa-plus"></i>
    </button>
    <div ngbDropdownMenu>
        <newLookUpComponent></newLookUpComponent>
     </div>
</div>

Компонент для раскрывающегося меню 

@ViewChild(NgbDropdownMenu) caseCodeDropdown: NgbDropdownMenu;

public dropdownCloseSub: Subscription = new Subscription;

constructor(private _eventEmitterService: EventEmitterService) { }

public ngOnInit(): void {
    this.dropdownCloseSub = this._eventEmitterService.invokeSubmitNewMatterCode.subscribe(() => {
            this.caseCodeDropdown.dropdown.close();
        });
}

Это прекрасно работает.Проблема в том, что мне нужно иметь более одного выпадающего меню на одной странице.У меня есть пять поисков для одной из страниц, и когда я использую приведенный ниже код, он работает только для caseCodeDropdown, который является первым раскрывающимся списком в верхней части HTML-документа.

HTML с более чем одним раскрывающимся спискомmenu 

<div ngbDropdown  id="caseCodeDropdown" 
                  (openChange)="openChange($event);" 
                  class="input-group-append d-inline-block col-sm-1 px-0 mx-0">
    <button ngbDropdownToggle class="btn btn-sm btn-outline" type="button" >
         <i class="fal fa-plus"></i>
    </button>
    <div ngbDropdownMenu>
        <newLookUpComponent></newLookUpComponent>
     </div>
</div>

<div ngbDropdown  id="fileNoDropdown" 
                  (openChange)="openChange($event);" 
                  class="input-group-append d-inline-block col-sm-1 px-0 mx-0">
    <button ngbDropdownToggle class="btn btn-sm btn-outline" type="button" >
         <i class="fal fa-plus"></i>
    </button>
    <div ngbDropdownMenu>
        <newLookUpComponent></newLookUpComponent>
     </div>
</div>

<div ngbDropdown  id="OPCDropdown" 
                  (openChange)="openChange($event);" 
                  class="input-group-append d-inline-block col-sm-1 px-0 mx-0">
    <button ngbDropdownToggle class="btn btn-sm btn-outline" type="button" >
         <i class="fal fa-plus"></i>
    </button>
    <div ngbDropdownMenu>
        <newLookUpComponent></newLookUpComponent>
     </div>
</div>

Компонент с несколькими выпадающими меню 

@ViewChild(NgbDropdownMenu) caseCodeDropdown: NgbDropdownMenu;
@ViewChild(NgbDropdownMenu) fileNoDropdown: NgbDropdownMenu;
@ViewChild(NgbDropdownMenu) OPCDropdown: NgbDropdownMenu;

public dropdownCloseSub: Subscription = new Subscription;

constructor(private _eventEmitterService: EventEmitterService) { }

public ngOnInit(): void {
    this.dropdownCloseSub = this._eventEmitterService.invokeSubmitNewMatterCode.subscribe(() => {
            this.caseCodeDropdown.dropdown.close();
            this.fileNoDropdown.dropdown.close();
            this.OPCDropdown.dropdown.close();
        });
}

ЧТО Я ПРОБОВАЛ

Сначала я попробовал 

@ViewChild("caseCodeDropdown") caseCodeDropdown: NgbDropdownMenu;
@ViewChild("fileNoDropdown") fileNoDropdown: NgbDropdownMenu;
@ViewChild("OPCDropdown") OPCDropdown: NgbDropdownMenu;

Использование @ViewChild() Передача идентификатора элемента оставила все caseCodeDropDown, fileNoDropdown, OPCDropdown неопределенными.Я не смог их закрыть.

Далее 

var target = document.getElementId('caseCodeDropdown');

Проблема этого метода в том, что я не могу использовать функции ngbDropdownMenu.target.dropdown.close() выдает ошибку.

Есть ли другой способ, которым я могу получить элемент по его идентификатору и все еще использовать функции ngbDropdownMenu.

Спасибо за ваше время!

...