web-dev-qa-db-fra.com

Comment définir les valeurs par défaut dans ng-select dans angular6?

J'utilise angular6 multi-select qui ont une liste d'éléments provenant d'un tableau d'objets de angular sur ngOnInit comme celui-ci qui passe dans multi-select:

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

Je veux définir 2 valeurs par défaut dans multi-select quand le formulaire sera chargé. Pour cela, je lie ngModel sur multi-selectet dans cette variable je mets des valeurs sur ngOnInit comme ceci

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

Dans mon component.html je crée multi-select comme ça :

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

Mais les valeurs ne sont pas définies par défaut dans la sélection multiple.

angulartypescriptangular6multi-selectangular-ngselect
5
Fahad Subzwari

Vous devez utiliser le [items] liaison d'entrée au lieu de [options]

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

Et sur le module.ts de votre composant, importez le NgSelectModule. Et si vous n'avez pas importé votre FormsModule, vous devez le faire, car il doit être importé pour que la liaison bidirectionnelle avec ngModel fonctionne.

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

si vous utilisez à la fois bindlabel et bindvalue, recherchez d'abord l'index de la valeur sélectionnée t e

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

les valeurs ne sont pas définies par défaut dans la sélection multiple

pour cela, affectez this.sensorTypes[0] à ngModel de votre ng-select dans ngOnInit()

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

cela obtiendra le premier attribut par défaut.

0
ganesh045