web-dev-qa-db-fra.com

Réglage angulaire 4 option sélectionnée dans la liste déroulante

plusieurs questions à ce sujet et différentes réponses. Mais aucun d’entre eux ne répond vraiment à la question. Donc encore:

La définition par défaut d'une liste déroulante par valeur ne fonctionne pas dans mon cas. pourquoi? Ceci est tiré du didacticiel dynamique Form de Angular 4:

<select [id]="question.key" [formControlName]="question.key">
      <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected">{{opt.selected+opt.value}}</option>
</select>

Il ne sélectionne rien. Les options disponibles sont:

  • trueeaaa
  • falsebbb
  • falseccc

Mais statique vrai:

<option ... [selected]="true">...</option>

sélectionne la dernière valeur (toutes vraies) . Il fonctionne également avec une variable privée boolvar = true et l’utilise dans [selected]="boolvar"

Je ne comprends pas la différence entre l'objet "opt" et la variable de classe ??

javascriptangular
9
Gregor Sklorz

Si vous souhaitez sélectionner une valeur basée sur l'utilisation vraie/fausse 

[selected] = "opt.selected == true"

 <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected == true">{{opt.selected+opt.value}}</option>

vérifiez-le

Angular 2 - Définition de la valeur sélectionnée dans la liste déroulante

5
Vijay ijardar

Voici mon exemple:

<div class="form-group">
    <label for="contactMethod">Contact method</label>
    <select 
        name="contactMethod" 
        id="contactMethod" 
        class="form-control"
        [(ngModel)]="contact.contactMethod">
        <option *ngFor="let method of contactMethods" [value]="method.id">{{ method.label }}</option>
    </select>
</div>

Et en composant, vous devez obtenir les valeurs de select:

contactMethods = [
    { id: 1, label: "Email" },
    { id: 2, label: "Phone" }
]

Donc, si vous voulez choisir une valeur par défaut (et vous le voulez probablement):

contact = {
    firstName: "CFR",
    comment: "No comment",
    subscribe: true,
    contactMethod: 2 // this id you'll send and get from backend
}
7
Carnaru Valentin

Si vous souhaitez sélectionner une valeur par défaut, donnez-lui une valeur dans votre générateur de formulaire: 

this.myForm = this.FB.group({
    mySelect: [this.options[0].key, [/* Validators here */]]
});

Maintenant dans votre HTML: 

<form [formGroup]="myForm">
    <select [formControlName]="mySelect">
        <option *ngFor="let opt of options" [value]="opt.key">ANY TEXT YOU WANT HERE</option>
    </select>
</form>

Mon code donne à votre sélection une valeur égale à la première valeur de votre liste d'options. Voici comment vous sélectionnez une option par défaut dans Angular, cette option est inutile. 

4
trichetriche

Supprimer [sélectionné] de l'option tag:

<option *ngFor="let opt of question.options" [value]="opt.key">
  {{opt.selected+opt.value}}
</option>

Et dans votre générateur de formulaire, ajoutez:

key: this.question.options.filter(val => val.selected === true).map(data => data.key)
0
porgo