Question

我在页面上有多个ng-select，并且正在尝试从ts中打开一个。

我可以使用以下方法专注于正确的ng-select：

@ViewChildren(NgSelectComponent) ngselect: QueryList<NgSelectComponent>;
this.ngselect.last.filterInput.nativeElement.focus()

但是，我无法打开。我尝试了以下

this.ngselect.last.filterInput.nativeElement.open()

但收到错误：

_this.ngselect.last.filterInput.nativeElement.open is not a function

.open（）是一种方法...如何使它工作？ https://github.com/ng-select/ng-select#methods

Answer 1

您尝试过这样的事情

<ng-select #Selecter ></ng-select>

@ViewChild('Selecter') ngselect: NgSelectComponent;

ngAfterViewInit() {
  this.ngselect.open();
}

工作示例 Links To stackblitz

Answer 2

有一种更轻松的方法来实现您想要的。如果您查看文档（位于https://github.com/ng-select/ng-select#api），则会发现可以将isOpen传递给ng-select。传递到右侧isOpen的{{1}}的值更改将自动打开和关闭。

示例：

ng-select

，在组件类中，您只需更改isOpen即可打开和关闭选择。

Answer 3

您可能还需要在测试文件中将其打开，例如，当您要检查DOM中的项目时，等等：

1。创建一个文件并将其添加（或根据需要添加到现有文件中）

import { DebugElement } from '@angular/core';
import { ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

/*
* Utils based on ng-select helper functions:
  https://github.com/ng-select/ng-select/blob/3018a1098ba2ad06fbdf4dfe60209087cbd68185/src/ng-select/testing/helpers.ts
*/
export function getNgSelectElement(fixture: ComponentFixture<any>): DebugElement {
    return fixture.debugElement.query(By.css('ng-select'));
  }

export function triggerKeyDownEvent(element: DebugElement, which: number, key = ''): void {
  element.triggerEventHandler('keydown', {
      which: which,
      key: key,
      preventDefault: () => { },
  });
}

2。将功能导入您的测试文件并按以下方式使用它们：

// Open the dropdown
triggerKeyDownEvent(getNgSelectElement(fixture), 32);
fixture.detectChanges();

从ts中打开选择（角度，ng-选择）

3 个答案: