如何在angular6中的ng-select中设置默认值？答案

【问题标题】：How to set default values in ng-select in angular6?如何在angular6中的ng-select中设置默认值？
【发布时间】：2019-07-15 00:05:00
【问题描述】：

我正在使用 angular6 multi-select，它有一个来自 ngOnInit 上的角度服务的对象数组中的项目列表，就像这样传递到 multi-select ：

this.sensorTypes = [
  { label : "Power", value : "P"},
  { label : "Current", value : "C"},
  { label : "Voltage", value : "V"}
]

当表单加载时，我想在multi-select 中默认设置 2 个值。为此，我将ngModel 绑定到multi-select 并在该变量中设置ngOnInit 的值，就像这样

this.selectedAttributes = [
  {label : "Current", value : "C"},
  {label : "Voltage", value : "V"}
]

在我的 component.html 中，我正在像这样创建 multi-select：

<div class="form-group row">
  <div class="col-sm-10">
    <ng-select 
       [ngClass]="'ng-select'" 
       [(ngModel)]="selectedAttributes" 
       [ngModelOptions]="{standalone: true}" 
       [options]="sensorTypes"
       [multiple]="true">
    </ng-select>
  </div>
</div>

但在多选中默认不设置值。

【问题讨论】：

你可以在ngOnInit 或任何类似的生命周期中做这样的事情：this.selectedAttributes = this.sensorTypes[0]，如果sensorTypes 是array 的objects
为什么我在绑定 ngModel 时需要这样做？
能否请您发布 StackBlitz
让我创建 stackBlitz

标签： angular typescript angular6 multi-select angular-ngselect

【解决方案1】：

有两个不同的 ng-select 模块：

@ng-select/ng-select
ng-select

两个指令标签是相同的，并且 [options] 用于 ng-select 和 [items] 用于@ng-select/ng-select

ng-选择文档https://basvandenberg.github.io/ng-select/#/documentation

你可以选择使用任何一个

【讨论】：

【解决方案2】：

在多选中默认不设置值

为此，将this.sensorTypes[0] 分配给ngOnInit() 中ng-select 的ngModel

    ngOnInit() {
      this.selectedAttributes = this.sensorTypes[0]
    }

这会将第一个属性作为默认属性。

【讨论】：

如果我必须在 ng-select 中默认设置多个值怎么办？

【解决方案3】：

如果你同时使用 bindlabel 和 bindvalue 所以首先找到所选值 t 的索引 e

var index= this.sensorTypes.findIndex(x => x.ID ==something); 
//this will set value
this.selectedAttributes= this.sensorTypes[index].ID;

【讨论】：

这是对我有帮助的答案，因为我同时使用绑定值和绑定标签。对于不明白的人->您必须将您给出的值绑定为bindValue作为值，而不是bindLabel值

【解决方案4】：

您应该使用[items] 输入绑定而不是[options]

<ng-select 
  [items]="sensorTypes"
  bindLabel="label"                 
  [multiple]="true"
  placeholder="Select"
  [(ngModel)]="selectedAttributes">
</ng-select>

然后在组件的 module.ts 上，导入 NgSelectModule。如果你还没有导入你的FormsModule，你应该这样做，因为它需要被导入才能与ngModel进行2路绑定才能工作。

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
.
.
@NgModule({
  imports: [
    FormsModule,
    NgSelectModule,
. 
.
.

【讨论】：

但是当我打开下拉列表时，列表在角度多选中正确显示。那么唯一的问题是我不能动态设置默认值。
Hmm.. 但是根据 ng-select 文档 (npmjs.com/package/@ng-select/ng-select)，[options] 没有这样的绑定。我认为您需要使用 [items] 才能使其正常工作
我已经编辑了我的解决方案；添加bindLabel。你想尝试复制和粘贴我的代码，看看它是否有效？
是的，它会抛出这样的错误Can't bind to 'items' since it isn't a known property of 'ng-select'.
哦..您使用的是旧版本的 ng-select 吗？