从 ts (angular, of-select) 打开 select

Question

我在一个页面上有几个 ng-selects，我正在尝试从 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

有一种更简单的方法可以实现您的目标。如果您查看文档（可在此处找到：https://github.com/ng-select/ng-select#api），您会发现可以将 isOpen 传递给 ng-select。更改传递给右侧 ng-select 的 isOpen 的值将自动打开和关闭它。

示例：

<ng-select
  [isOpen]="isOpen"
  [items]="items"
>
</ng-select>

并且在组件 class 中，您只需更改 isOpen 即可打开和关闭 select。

Answer 2

你试过这样的事情吗

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

@ViewChild('Selecter') ngselect: NgSelectComponent;

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

工作示例 Links To stackblitz

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 (angular, of-select) 打开 select

Open select from ts (angular, ng-select)

angular-ngselect

angular