Javascript Angular2切换/打开ng2选择下拉列表

角度4.3+

我正在使用ng2选择下拉列表

我想打开某个事件的下拉列表。我想触发打开下拉列表的事件

下拉列表：

<ng-select
        [items]="list"
        [(ngModel)]="modelName"
        placeholder="Select">
</ng-select>

当用户单击下拉列表时，它将获得焦点，并显示列表。我希望这发生在不同按钮的点击事件上

到目前为止，我所尝试的：

this.el

是

ElementRef

到

ng select

元素。（正确获取ng select的元素引用，则会记录我试图触发事件的正确元素。）

当用户单击它时，它就会打开，我试图触发元素上的单击事件。

this.el.nativeElement.click（）

试图在上触发单击事件。ui选择切换元素。

this.el.nativeElement.querySelector（“.ui选择切换”）.dispatchEvent（新事件（'click'））

类似地，我试图触发

focus

事件，但没有成功

---

有没有其他方法可以触发ng select元素上的某个事件，从而将焦点放在ng select上并打开下拉列表

我将单击事件触发器代码封装在setTimeOut函数中，如下所示，现在它工作正常

setTimeout(() => {
     this.el
         .nativeElement
         .querySelector('.ui-select-toggle')
         .dispatchEvent(new Event('click'));
});

.ui select toggle

是元素在单击时进行下拉切换，因此我认为如果触发该元素上的单击事件，它将切换/打开下拉列表

因此我尝试了以下方法（没有setTimeOut包装器）

它什么也没做。但是当我在setTimeOut中包装代码时，它实际上触发了click事件，我得到了预期的功能

---

在这里，我不确定它为什么会这样运行，但我相信这与javascript有关。

如果您使用的是多模式：

openNg2Select(ng2Select: SelectComponent) {
    setTimeout(() => {
        const ng2 = ng2Select.element.nativeElement.querySelector('.ui-select-search');
        ng2.dispatchEvent(new Event('click'));
    });
}

在HTML中：

openNg2Select(ng2Select: SelectComponent) {
    setTimeout(() => {
        const ng2 = ng2Select.element.nativeElement.querySelector('.ui-select-search');
        ng2.dispatchEvent(new Event('click'));
    });
}