如何在 angular6 的 ng-select 中设置默认值?
How to set default values in ng-select in angular6?
我正在使用 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.
中没有默认设置值
您应该使用 [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,
.
.
.
values are not setting by default in multi-select
为此,将 this.sensorTypes[0]
分配给 ngOnInit()
中 ng-select
的 ngModel
ngOnInit() {
this.selectedAttributes = this.sensorTypes[0]
}
这将获取第一个属性作为默认属性。
如果您同时使用 bindlabel 和 bindvalue,那么先找到所选值 t 的索引
e
var index= this.sensorTypes.findIndex(x => x.ID ==something);
//this will set value
this.selectedAttributes= this.sensorTypes[index].ID;
有两个不同的 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 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.
中没有默认设置值您应该使用 [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,
.
.
.
values are not setting by default in multi-select
为此,将 this.sensorTypes[0]
分配给 ngOnInit()
ng-select
的 ngModel
ngOnInit() {
this.selectedAttributes = this.sensorTypes[0]
}
这将获取第一个属性作为默认属性。
如果您同时使用 bindlabel 和 bindvalue,那么先找到所选值 t 的索引 e
var index= this.sensorTypes.findIndex(x => x.ID ==something);
//this will set value
this.selectedAttributes= this.sensorTypes[index].ID;
有两个不同的 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
您可以选择使用其中任何一个