[英]How to set default values in ng-select in angular6?
I am using angular6 multi-select
which have a list of items coming in an array of objects from angular service on ngOnInit
like this which is passing into multi-select
:我正在使用 angular6
multi-select
,它有一个项目列表,这些项目来自ngOnInit
上的 angular 服务的对象数组,就像这样传递给multi-select
:
this.sensorTypes = [
{ label : "Power", value : "P"},
{ label : "Current", value : "C"},
{ label : "Voltage", value : "V"}
]
I want to set 2 values by default in multi-select
when form will load.我想在加载表单时在
multi-select
默认设置 2 个值。 For this i am binding ngModel
on multi-select
and in that variable i am setting values on ngOnInit
like this为此,我在
multi-select
上绑定ngModel
,在该变量中,我像这样在ngOnInit
上设置值
this.selectedAttributes = [
{label : "Current", value : "C"},
{label : "Voltage", value : "V"}
]
In my component.html i am creating multi-select
like this :在我的 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>
But values are not setting by default in multi-select.但默认情况下,多选中并未设置值。
You should use the [items]
input binding instead of [options]
您应该使用
[items]
输入绑定而不是[options]
<ng-select
[items]="sensorTypes"
bindLabel="label"
[multiple]="true"
placeholder="Select"
[(ngModel)]="selectedAttributes">
</ng-select>
And on your component's module.ts, import the NgSelectModule
.在组件的 module.ts 上,导入
NgSelectModule
。 And if you haven't import your FormsModule
, you should do so, as it needs to be imported for 2 way binding with ngModel
to work.如果您还没有导入
FormsModule
,则应该这样做,因为需要导入它才能与ngModel
进行 2 路绑定才能工作。
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
.
.
@NgModule({
imports: [
FormsModule,
NgSelectModule,
.
.
.
if you are using both bindlabel and bindvalue so fist find index of selected value te如果您同时使用 bindlabel 和 bindvalue,那么首先找到所选值 te 的索引
var index= this.sensorTypes.findIndex(x => x.ID ==something);
//this will set value
this.selectedAttributes= this.sensorTypes[index].ID;
values are not setting by default in multi-select
多选中的默认值未设置
for this assign this.sensorTypes[0]
to ngModel of your ng-select
in ngOnInit()
为此,在
ngOnInit()
this.sensorTypes[0]
分配给ng-select
的ngOnInit()
ngOnInit() {
this.selectedAttributes = this.sensorTypes[0]
}
this will get the first attribute as the default one.这将获得第一个属性作为默认属性。
There are two different ng-select modules:有两个不同的 ng-select 模块:
@ng-select/ng-select
ng-select
both directive tags are same and [options] used in ng-select and [items] used in @ng-select/ng-select
两个指令标签相同,并且 [options] 用于 ng-select 和 [items] 用于
@ng-select/ng-select
ng-select documentation https://basvandenberg.github.io/ng-select/#/documentation ng-select 文档https://basvandenberg.github.io/ng-select/#/documentation
Its all your choice to use any of one您可以选择使用任何一种
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.