Angular2 切换/打开 ng2-select 下拉菜单

Question

角 4.3+

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

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

下拉列表：

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

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

到目前为止我尝试过的：

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

1. 当用户点击它时它会打开，我试图触发一个元素上的点击事件。 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 函数中，如下所示，现在工作正常。

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

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

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

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

它什么也没做。 但是，当我将该代码包装在 setTimeOut 中时，它实际上会触发单击事件并获得预期的功能。

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

Answer 2

如果您使用多模式：

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

在 HTML 中：

<ng-select #ng2Select [multiple]="true" [items]="items" (selected)="selected($event)"
           (removed)="removed($event)" placeholder="Please Select" 
           [(ngModel)]="selectedItem">
</ng-select>
<button class="btn btn-pripary" (click)="openNg2Select(ng2Select)>Open ng2-select</button>