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

Question

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

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

我想在加载表单时在 multi-select 中默认设置 2 个值。为此，我在 multi-select 上绑定 ngModel，在那个变量中，我在 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>

但是在 multi-select.

中没有默认设置值

Answer 1

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

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

并在您的组件 module.ts 上导入 NgSelectModule。如果你还没有导入你的 FormsModule，你应该这样做，因为它需要导入才能与 ngModel 进行双向绑定。

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

Answer 2

values are not setting by default in multi-select

为此，将 this.sensorTypes[0] 分配给 ngOnInit()

中 ng-select 的 ngModel

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

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

Answer 3

如果您同时使用 bindlabel 和 bindvalue，那么先找到所选值 t 的索引 e

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

Answer 4

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

@ng-select/ng-select
ng-select

两个指令标签相同，[options] 在 ng-select 中使用，[items] 在 @ng-select/ng-select

中使用

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

您可以选择使用其中任何一个

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

How to set default values in ng-select in angular6?

multi-select

typescript

angular-ngselect

angular

angular6