标签: angular-ngselect

我正在使用ng-select下拉搜索，但如果没有从下拉列表中选择任何内容，我将无法获得验证。我像下面这样返回：

<div class="form-group">
   <ng-select [items]="productData" [searchable]="true" bindLabel="productName"
   [formControl]="prodCode"
   [ngClass]="{ 'is-invalid': submitted && f.prodCode.errors }"
   placeholder="Select Product" required>  
   </ng-select>
   <div *ngIf="submitted && f.prodCode.errors" class="invalid-feedback">
      <div *ngIf="f.prodCode.errors.required">Product Code is required</div>
   </div>
</div>

在 Ts 文件中

this.productForm = this.fb.group({
    prodCode: new FormControl(null, Validators.required)
});
get f() {
    return this.productForm.controls;
}
this.submitted = true;
if (this.productForm.invalid) {
    return;
}

所以恳请您让我知道我的错误在哪里......

我正在使用ng-select显示我的应用程序从 API 检索到的数据，但尽管数据已成功检索到，但下拉列表中并未显示任何内容。它只是说“未找到任何项目”。在控制台中，我有以下错误：

ERROR TypeError: Cannot read property '$ngoptionlabel' of null

这是我的打字稿代码：

// in a service, using HttpClient
this.http.get<string[]>(url);

// in a component, using the service injected in
data: string[] = [];
this.service.get()
   .subscribe(data => {
      this.data = data; // data contains values as expected
      // other logic
   });

在我的模板中，我传递this.data给ng-select.

<ng-select [items]="data"
           [multiple]="true"
           [closeOnSelect]="false"
           [searchable]="true">
</ng-select>

我认为错误听起来可能与bindLabel选项有关，但我没有使用它。错误是什么意思，我该如何解决？

我无法找到如何使用 ng-select 中所需的选项。

我已经尝试过这个：

<ng-select
    #skills
    required
    [ngClass]="{ 'is-invalid': f.submitted && skills.invalid }" 
    [items]="options" 
    bindLabel="label" bindValue="value"
    [multiple]="true" placeholder="Select Skills" 
    [(ngModel)]="registerUserData.skills"                                       
    name="skills[]">
</ng-select>
<div *ngIf="f.submitted && skills.invalid" class="invalid-feedback">
    <div *ngIf="skills.errors.required">
       Skills are required
    </div>
</div>

但那里没有运气..

Ng-select 没有向客户端显示 bindLabel 值。也没有一个错误。我有几个 ng-select 下拉菜单。它在一个 div 中的一个下拉列表中显示价值。但是，即使我在另一个 div 中使用相同的下拉列表，它也没有显示该值。

这是我的一个 div 的下拉列表：

<div class="col-12 col-sm-12 col-md-4 m-auto mt-2">
<ng-select [items]="immigrationOptions" placeholder="Immigration Status" bindLabel="immigration_s_name"
bindValue="id" [ngClass]="{ 'is-invalid': submitted && f.immigration_status_id.errors }" appendTo="body" [virtualScroll]="true" formControlName="immigration_status_id"             [(ngModel)]="immigrationOption" aria-describedby="cnt_immigration_status_id">
     </ng-select>
    <small id="cnt_immigration_status_id" class="form-text text-muted">Immigration Status</small>
    <div *ngIf="submitted && f.immigration_status_id.errors" class="invalid-feedback">
   <div *ngIf="f.immigration_status_id.errors.required">Immigration status is required</div>
</div>
</div>

我两次使用相同的下拉菜单。但是，它不会在另一个 div 的第二个下拉列表中向用户显示标签

请检查附加的屏幕截图。

这在下拉列表中没有显示任何值。这是在下拉列表中显示值：

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

我正在使用Angular 5 版本 1.4.2 的ng-select库。我有一个包含大约 700 条记录的大型数据集。我选择的下拉列表中的数据看起来不错，但仅在几秒钟后才出现。有没有办法让它更快地出现？

我研究过虚拟滚动。这是一个选择吗？我还需要能够进行搜索，在https://ng-select.github.io/ng-select#/virtual-scroll的演示中，我不确定这是否有效。

这是我的选择框的 HTML：

<ng-select [items]="clients| async | orderBy : ['name']"
           [closeOnSelect]="true"
           [searchable]="true"
           bindValue="id.clientID"
           bindLabel="name"
           placeholder="Select a Client..."
           notFoundText=""
           [(ngModel)]="selectedClient"
           name="client">
</ng-select>

这是我的 Angular 组件代码，它在初始化时加载此数据：

ngOnInit() {
    this.clients = this.clientService.getClients();
}

客户定义为

clients: Observable<Client[]>;

我遇到的情况是，我需要在 ng-select 下搜索时根据自定义逻辑对数据进行排序。可以选择使用 [searchFn] 跨多个字段进行搜索，但我需要根据我的自定义逻辑对匹配结果进行排序。

1. 这可能吗 ？
2. 请分享一些最初的理想如何实现？

ng-select：https://github.com/ng-select/ng-select

我在 Angular 9 应用程序中使用带有自定义表单控件的响应式表单。

我用自定义表单控件包装了我的ng-select控件。

我在验证方面遇到问题。我将 formControl 设置为必需。文档说cssng-invalid类应该自动设置为 ng-select。但实际上使用自定义表单控件它无法正常工作。css 类未设置，但包装器类已设置。我做错了什么还是这是图书馆的问题？

检查stackblitz： https://stackblitz.com/edit/angular-rmvttg-ex63ka ?file=src/forms-single-select-example.component.html&fbclid=IwAR2robtd_15khTVhmW59lLhn21HOHl_yYTrCWKaPRmfUt1QVvUn3n8V4Vjo

如何在我的 ng-select 下拉列表中添加一个额外的项目，例如Create New in the following image：

这是我目前的代码：

<ng-select
    [multiple]="true"
    [hideSelected]="true"
    [items]="robots"
    formControlName="RobotGUID"
    bindLabel="Name"
    bindValue="GUID"
>
    <ng-template ng-label-tmp let-item="item" let-clear="clear">
        <ng-container *ngIf="item.GUID">
            <span class="ng-value-icon left" (click)="onRobotEditClick($event, item.GUID)" aria-hidden="true">
                <i class="fas fa-edit btn-focus"></i>
            </span>
            <span class="ng-value-label">{{item.Name}}</span>
            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
        </ng-container>
    </ng-template>
</ng-select>

我尝试使用，<ng-option>但该项目没有出现在下拉列表中。如何从模板中添加额外的项目？

我的目的是使用这个选择

在我的延迟加载模块中我这样做：

imports: [
        CommonModule,
        FormsModule,    
        NgSelectModule        

    ],
    providers: []

模板：

<ng-select [items]="list" [bindLabel]="TIPE" bindValue="id" [(ngModel)]="tipe" (onChange)="changeValue($event)" >
            </ng-select>

当用户走这条路线时，它会在控制台中打印以下错误：

:

 Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model]: 
  NullInjectorError: No provider for InjectionToken ng-select-selection-model!
NullInjectorError: R3InjectorError(AppModule)[InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model]: 
  NullInjectorError: No provider for InjectionToken ng-select-selection-model!

我不明白为什么，有人可以帮助我吗？