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

Question

Angular 4.3+

我正在使用ng2-select下拉列表。

我希望在某些事件中打开下拉菜单。我想触发打开下拉列表的事件。

下拉：

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

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

到目前为止我尝试过：

this.el ElementRef为ng-select元素。 （正确获取ng-select的元素引用，它控制台记录正在尝试触发事件的正确元素。）

1. 当用户点击它时打开，我试图触发元素上的click事件。 this.el.nativeElement.click();
2. 尝试在.ui-select-toggle元素上触发点击事件。 this.el.nativeElement.querySelector('.ui-select-toggle').dispatchEvent(new Event('click'));
3. 同样，我试图触发focus事件，但没有效果。

还有其他任何方法可以触发ng-select元素上的某个事件，该元素会关注ng-select并打开下拉列表。

Answer 1

我在setTimeOut函数中包含click事件触发器代码，如下所示，现在工作正常。

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

.ui-select-toggle是单击时下拉切换的元素，所以我想如果我触发该元素上的click事件，它将切换/打开下拉列表。

所以我尝试了以下（没有setTimeOut包装器）

this.el
         .nativeElement
         .querySelector('.ui-select-toggle')
         .dispatchEvent(new Event('click'));

它没有做任何事。但是当我在setTimeOut中包装该代码时，它实际上会触发click事件并获得预期的功能。

我不知道为什么它的功能如此，但我相信这与javascript有关。