13

我正在使用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>

但是默认情况下，在多选中未设置值。

4

4 回答 4

7

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

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

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

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
.
.
@NgModule({
  imports: [
    FormsModule,
    NgSelectModule,
. 
.
.
于 2019-02-21T06:56:26.780 回答
3

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

var index= this.sensorTypes.findIndex(x => x.ID ==something); 
//this will set value
this.selectedAttributes= this.sensorTypes[index].ID;
于 2020-02-25T12:13:40.550 回答
1

默认情况下未在多选中设置值

为此分配给您的this.sensorTypes[0]ngModelng-selectngOnInit()

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

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

于 2019-02-21T07:18:12.197 回答
0

有两个不同的 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

您可以选择使用任何一个

于 2021-09-30T07:42:26.847 回答