[英]Angular2 toggle/open ng2-select dropdown
Angular 4.3+角 4.3+
I am using ng2-select dropdown.我正在使用 ng2-select 下拉列表。
I want the drop down to be opened on some event.我希望在某些事件中打开下拉菜单。 I want to trigger the event that would open the drop down.我想触发打开下拉菜单的事件。
Dropdown:下拉列表:
<ng-select
[items]="list"
[(ngModel)]="modelName"
placeholder="Select">
</ng-select>
When the user clicks on the dropdown it gets focus and the list is being displayed.当用户单击下拉菜单时,它会获得焦点并显示列表。 I would like this happen on some click event on the different button.我希望在不同按钮上的某些点击事件上发生这种情况。
What I have tried so far:到目前为止我尝试过的:
this.el
is ElementRef
to the ng-select
element. this.el
是ng-select
元素的ElementRef
。 (Getting the element reference for ng-select correctly, it console log correct element that I am trying to trigger events.) (正确获取 ng-select 的元素引用,它会控制台记录我试图触发事件的正确元素。)
this.el.nativeElement.click();
this.el.nativeElement.querySelector('.ui-select-toggle').dispatchEvent(new Event('click'));
focus
event but didn't work.同样,我试图触发focus
事件但没有奏效。Is there any other way that we can trigger some event on ng-select element that gets focus on ng-select and get the drop down open.有没有其他方法可以在 ng-select 元素上触发一些事件,这些事件将焦点放在 ng-select 上并打开下拉菜单。
I wrap up the click event trigger code inside the setTimeOut function like below and it is working fine now.我将点击事件触发代码包含在 setTimeOut 函数中,如下所示,现在工作正常。
setTimeout(() => {
this.el
.nativeElement
.querySelector('.ui-select-toggle')
.dispatchEvent(new Event('click'));
});
.ui-select-toggle
is the element does dropdown toggle on click, so I figured if I trigger click event on that element it will toggle/open the drop-down. .ui-select-toggle
是元素在单击时进行下拉切换,所以我想如果我在该元素上触发单击事件,它将切换/打开下拉列表。
So I tried the following(without the setTimeOut wrapper)所以我尝试了以下(没有 setTimeOut 包装器)
this.el
.nativeElement
.querySelector('.ui-select-toggle')
.dispatchEvent(new Event('click'));
And it did nothing.它什么也没做。 But when I wrap that code in setTimeOut it actually triggers the click event and I get expected functionality.但是,当我将该代码包装在 setTimeOut 中时,它实际上会触发单击事件并获得预期的功能。
Here I am not sure why it functions like that but I believe this is something related to javascript.在这里,我不确定为什么它会这样运行,但我相信这与 javascript 相关。
If you are using multiple mode:如果您使用多模式:
openNg2Select(ng2Select: SelectComponent) {
setTimeout(() => {
const ng2 = ng2Select.element.nativeElement.querySelector('.ui-select-search');
ng2.dispatchEvent(new Event('click'));
});
}
In HTML:在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.