标签: angular-ngselect

我在一个页面上有几个 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

采用了棱角分明6，我想CONCAT名字和姓氏在bindLabel里面NG-select标签 ？

这是我的 html ： ng-select [items]="persons" bindLabel="LastName" bindValue="Id" [(ngModel)]="selectedItem" placeholder="person"

任何的想法 ？bindLabel="LastName + ' ' +FirstName" => 不起作用 bindLabel="person.Name as (person.LastName + ' ' person.FirstName) for person inperson" => 不起作用

我正在使用ng-select并定义了一个包含输入的自定义过滤器标题模板。

当为选择打开下拉菜单时，我希望输入获得焦点，但我不知道如何操作。

我这里有一个例子 -> https://stackblitz.com/edit/angular-playground-f57jog

我确实尝试附加到 ng-select(open)输出并调用focus()我的输入元素，但这对我来说失败了。

这里的正确方法是什么？谢谢

迁移到@ng-select v3.x ( https://github.com/ng-select/ng-select ) 后，鼠标单击不再适用于项目。我的应用程序使用 bootstrap 4 和 Angular 8。返回到 v2.20.5 版本再次正常工作。

有人有同样的问题吗？

我在表单上使用ng-select，但现在我想将其特定配置包装在自定义组件上。问题是我正在使用FormArray包含其中几个的 a，以下面的方式：

this.profileForm = this.formBuilder.group(
  {
    ...
    linkedRoles: this.formBuilder.array([])
  }
);

这linkedRoles由下一个填充FormGroup：

let fgRoles: FormGroup;

for (let i = 0; i < this.userRoles.length; i++) {
  fgRoles = this.formBuilder.group({
    activeRole: [{ value: null }],
    roles: [{ value: null }]
  });
  this.linkedRoles.push(fgRoles);
  this.linkedRoles.controls[i].setValue({
    activeRole: this.userRoles[i].role,
    roles: this.extractUserRoles(this.userRoles[i])
  });

为了简单起见，还创建了 getter：

get linkedRoles(): FormArray {
  return <FormArray>this.profileForm.get("linkedRoles");
}

之后，在我的模板中，我使用了这个效果完美的组合：

<form [formGroup]="profileForm">
  ...

  <table>
    ...
    <tbody>
      <tr formArrayName="linkedRoles"
        *ngFor="let usuR of userRoles;
          let idx = index" …

我想对 ng2-select 中的项目使用 ngx-translate。我能想到的唯一方法是使用翻译服务并在绑定之前改变 ts 文件中项目的文本。

有没有办法使用管道或指令，因为我想让它保持一致。

提前致谢。

我正在尝试使用 TestBed from 来测试在其 HTML 中具有 ng-select 的 Angular 组件。我首先收到错误消息，说无法绑定到“项目”，因为它不是“ng-select”的已知属性。所以我导入了 NgSelectModule 并将其添加到 TestBed 配置中的导入中。它现在返回Can't bind to 'ngModel' 因为它不是 'ng-select' 的已知属性

import { getTestBed, TestBed } from '@angular/core/testing';
import { ProductGenericGridComponent } from './product-generic-grid.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ProductGridService } from './product-generic-grid.service';
import { NgSelectModule } from '@ng-select/ng-select';
import { ProductItemComponent } from './../product-item/product-item.component';

describe('Product Generic Grid Component', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ProductGenericGridComponent],
            imports: [HttpClientTestingModule, NgSelectModule],
            providers: []
        });
    }); …

我找到了一个可以“全选”的例子：https : //ng-select.github.io/ng-select#/multiselect-checkbox

但是，我收到一个错误：Cannot read property 'selected' of undefined. 我想知道为什么我会收到这个错误，以及如何在 Angular 5 中使用 ng-select 实现“全选”。

谢谢

我正在尝试创建一个下拉菜单，当用户在其外部单击时该菜单会自动关闭。在这个菜单中我添加了一个ng-select组件，但是当我点击其中一个选项时，菜单会关闭，因为关闭时ng-select的下拉面板不在DOM内部，有什么办法可以达到我想要的？当用户选择 ng-option 时，下拉菜单不会关闭？这里有一个问题的例子： https://stackblitz.com/edit/angular-8m1ta5 ?file=src%2Fapp%2Fapp.component.ts

这是我用来跟踪用户点击的代码：

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.father.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.dropdown = false;
    }
  }

#father识别下拉菜单的容器。

我在我的 Angular 项目中使用 ng-select ( https://ng-select.github.io/ng-select#/data-sources ) 库来显示下拉列表，如下所示：

<ng-select
  [items]="flattenedSelectList"
  bindLabel="displayName"
  placeholder="Select specialty"
  notFoundText="No results found. Please try a different search criteria."
  bindValue="id"
  groupBy="type"
  [(ngModel)]="selectedSpecialtyId">
</ng-select>

我想设置组标题以及每个组内的项目的样式？我该怎么做？

我在 .scss 文件中使用了以下内容，但它似乎没有应用更改。ng-optgroup 用于组标头，ng-option-label 用于项目。

.ng-optgroup {
  font-weight: bold;
  color: #dbe8ef;
}

.ng-option-label{
  color: red;
}