7
votes

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

J'utilise angular6 multi-select qui a une liste d'éléments venant dans un tableau d'objets du service angulaire sur ngOnInit comme celui-ci qui passe dans sélection multiple :

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

Je veux définir 2 valeurs par défaut dans sélection multiple lorsque le formulaire se chargera. Pour cela, je lie ngModel sur multi-select et dans cette variable, je règle des valeurs sur ngOnInit comme ceci

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

Dans mon component.html, je crée une sélection multiple comme ceci:

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

Mais les valeurs ne sont pas définies par par défaut en multi-sélection.

typescript angular angular6 multi-select angular-ngselect

4 commentaires

vous pouvez faire quelque chose comme ça dans ngOnInit ou dans n'importe quel cycle de vie comme celui-ci: this.selectedAttributes = this.sensorTypes [0] , if sensorTypes est le tableau des objets

pourquoi dois-je faire cela lorsque je lie ngModel contenant des valeurs?

pouvez-vous s'il vous plaît poster StackBlitz

laissez-moi créer stackBlitz

3 Réponses :

5
votes

Vous devez utiliser la liaison d'entrée [items] à la place de [options

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

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.

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

8 commentaires

mais la liste s'affiche correctement dans la sélection multiple angulaire lorsque j'ouvre la liste déroulante. alors le seul problème est que je ne règle pas les valeurs par défaut de manière dynamique.

Hmm .. Mais d'après les documentations ng-select ( npmjs.com/package / @ ng-select / ng-select ), il n'y a pas une telle liaison pour [options] . Je pense que vous devez utiliser [items] pour que cela fonctionne

J'ai édité ma solution; a ajouté bindLabel . Voulez-vous essayer de copier et coller mon code et voir s'il fonctionne?

oui, il lance une erreur comme celle-ci Impossible de se lier à 'items' car ce n'est pas une propriété connue de 'ng-select'.

Oh ... Utilisez-vous une ancienne version de ng-select?

J'utilise cette version "ng-select": "^ 1.0.1"

Ok, avez-vous importé {NgSelectModule} de '@ ng-select / ng-select'; et importé {FormsModule} de '@ angular / forms' sur votre module de composant ?

continuons cette discussion dans le chat

0
votes

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

pour cela, attribuez this.sensorTypes [0] au ngModel de votre ng-select dans ngOnInit()
    ngOnInit() {
      this.selectedAttributes = this.sensorTypes[0]
    }
cela obtiendra le premier attribut par défaut.

1 commentaires

Et si je dois définir plusieurs valeurs dans ng-select par défaut?

2
votes

si vous utilisez à la fois bindlabel et bindvalue, cherchez 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 commentaires

C'est la réponse qui m'a aidé, car j'utilise à la fois la valeur de liaison et l'étiquette de liaison. Pour les personnes qui ne comprennent pas -> Vous devez lier la valeur que vous avez donnée comme bindValue comme valeur, pas la valeur bindLabel