Как установить значения по умолчанию в ng-select в angular6? - PullRequest
Новая
       23

Как установить значения по умолчанию в ng-select в angular6?

0 голосов
/ 21 февраля 2019

Я использую angular6 multi-select, у которого есть список элементов, поступающих в массив объектов из угловой службы на ngOnInit, подобный этому, который переходит в multi-select: 

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

Я хочуустановить 2 значения по умолчанию в multi-select при загрузке формы.Для этого я привязываю 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>

Но значения не устанавливаются по умолчанию в множественном выборе.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

значения не устанавливаются по умолчанию в мульти-выборе

для этого назначения this.sensorTypes[0] для ngModel вашего ng-select в ngOnInit()

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

это получит первый атрибут как атрибут по умолчанию.

0 голосов
/ 21 февраля 2019

Вы должны использовать входную привязку [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,
. 
.
.
...