Búsqueda de sitios web

angular - ¿Cómo establecer valores predeterminados en ng-select en angular6?


Estoy usando angular6 multi-select que tiene una lista de elementos que provienen de un array de objetos desde un servicio de angular en ngOnInit así, que se pasa al multi-select:

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

Quiero establecer 2 valores por defecto en multi-select cuando se cargue el formulario. Para esto estoy vinculando ngModel en multi-select y en esa variable estoy estableciendo los valores en ngOnInit de la siguiente manera

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

En mi component.html estoy creando multi-select de esta manera:

<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>

Pero los valores no se establecen por defecto en la selección múltiple.

Respuesta #1

Deberías usar la vinculación de entrada [items] en lugar de [options]

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

Y en el module.ts de tu componente, importa el NgSelectModule. Y si no has importado tu FormsModule, deberías hacerlo, ya que necesita ser importado para que el enlace bidireccional con ngModel funcione.

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

Respuesta #2

si está usando tanto bindlabel como bindvalue, primero encuentre el índice del valor seleccionado t e

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

Artículos relacionados