web-dev-qa-db-fra.com

Comment définir la valeur sélectionnée par défaut de ion-option?

J'utilise Ionic v2 et je ne peux pas définir la valeur sélectionnée lors de l'affichage de la page.

<ion-select [(ngModel)]="company.form">
    <ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option>
</ion-select>

J'ai aussi essayé avec checked mais ça ne marche pas non plus. Comment puis-je faire ceci? 

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
htmlangularionic-frameworkionic2
14
Perrier

Si vous traitez avec des objets xor de valeur par défaut, le moyen le plus propre consiste à fournir une fonction de comparaison à l'attribut [compareWith]. Cette fonction prend 2 objets dans les paramètres et renvoie true s'ils sont égaux. De cette façon, les valeurs existantes dans le modèle seront sélectionnées au début. Cela fonctionne aussi si de nouvelles données sont ajoutées dans le modèle en dehors de la sélection.

L'exemple suivant est tiré du document officiel Ionic

<ion-item>
  <ion-label>Employee</ion-label>
  <ion-select [(ngModel)]="employee" [compareWith]="compareFn">
    <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
  </ion-select>
</ion-item>

compareFn(e1: Employee, e2: Employee): boolean {
  return e1 && e2 ? e1.id === e2.id : e1 === e2;
}
4
Nicolas Janel

Le problème semble être que ion-option n'aime pas les objets dans rc3. Je dois travailler uniquement avec la partie id de l'objet et écrire un gestionnaire de changement distinct qui trouve l'objet nécessaire et le définit comme valeur.

  <ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem">
    <ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option>
  </ion-select>

Et le changehandler:

companyFormSelected(newform) {
    let selectedForm = this.forms.find((f)=>{
      return f.id === newform;
    });
    this.company.form=selectedForm;
}

Cela semble être un bogue dans rc3 mais je ne sais pas où puis-je signaler un bogue. J'ai ouvert un sujet sur le forum ionique . 

12
Perrier

Vous n'avez pas besoin de travailler avec l'attribut sélectionné ou [sélectionné] il n'est pas nécessaire

<ion-select [(ngModel)]="company.form.id" name="company.form.id">
    <ion-option *ngFor="let form of forms" value="{{ form.id }}">
      {{ form.name }}
    </ion-option>
</ion-select>
4
0077cc
<ion-select [(ngModel)]="name">// binding the value available from ts file
    <ion-option *ngFor="let form of forms; let idx = index" [value]="form.name"  selected="{{(idx==0).toString()}}">{{form.name}}</ion-option>
</ion-select>

dans votre fichier ts

name = this.forms[0].name //assign the variable name to the first index of your array
4
Mohan Gopi

À l'intérieur de l'option d'ion, vous pouvez faire

<ion-option [attr.selected]="(form.name == name) ? true : null"> {{ form.name }} </ion-option>
1
A. Radulescu
  in html---->

     <ion-item text-center >
        <ion-select  [(ngModel)]="selectedQuestion" placeholder="Choose Security Question" >
          <ion-option *ngFor="let q of questionArray let i=index"  selected="{{(i==defaultSelectQuestion).toString()}}"  >
             {{q}}
            </ion-option>
        </ion-select>
      </ion-item>


in ts---->
//if u dont want any default selection
    this.defaultSelectQuestion = -1; 

//if first element should be your default selection
  this.defaultSelectQuestion = 0;



this.selectedQuestion=this.questionArray[this.defaultSelectQuestion]
1
Fir

Cela fonctionne pour moi. 

En html: 

<ion-select [(ngModel)]="company.form">
    <ion-option value="frm1"> Form 1 </ion-option>
    <ion-option value="frm2"> Form 2 </ion-option>
</ion-select>

En ts: 

company = {
   form:null
}; 

constructor(){
   this.company.form = "frm1";
}
1
Khurshid Ansari

ion Select tag Assigne simplement le tableau à ngModel et la valeur par défaut est sélectionnée. Simple

0
shridhar lingaraddi
<ion-select ([ngModel])="dropdown1">
  <ion-select-option value="1">Item1</ion-select-option>
  <ion-select-option value="2">Item2</ion-select-option>
</ion-select>

ce qui suit ne fonctionnera pas: 

const a = 2; dropdown1 = a;

mais ce qui suit fonctionnera:

const a = 2; dropdown1 = a + "";

Les valeurs des options de sélection sont traitées comme des chaînes. Vous devez donc affecter des valeurs de chaîne à votre variable de modèle afin que la comparaison n'échoue pas. 

0
user628176