web-dev-qa-db-fra.com

Sélection ionique avec options dynamiques dans Ionic 2?

Je développe une application dans Ionic 2. Je dois ajouter des options de sélection d'ions de manière dynamique, mais je suis perplexe sur quelque chose de très simple. Voici mon extrait de code.

<ion-select [(ngModel)]="classifications" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" value="key" [checked]="true">{{key}}</ion-option>


this.classifications = this.local.get('classifications')._result;
    console.log('classifications: '+ this.local.get('classifications')._result);


updateSelectedValue(event:string):void {
   this.selectedObject = JSON.parse(event);
   console.log('selectedObject: '+this.selectedObject);
}

Sortie pour le journal de la console:

classifications: ["Any","Agriculture, Forestry, And Fishing","Mining","Construction","Manufacturing","Transportation, Communications, Electric, Gas, And Sanitary Services","Wholesale Trade","Retail Trade","Finance, Insurance, And Real Estate","Services","Public Administration "]

Je reçois une exception aussi.

EXCEPTION: Cannot find a differ supporting object '["Any","Agriculture, Forestry, And Fishing","Mining","Construction","Manufacturing","Transportation, Communications, Electric, Gas, And Sanitary Services","Wholesale Trade","Retail Trade","Finance, Insurance, And Real Estate","Services","Public Administration "]' in [classifications in JobsearchPage@30:17]

Modifier:

Et ce n'est pas définir sa valeur pour sélectionner des options. Je l'ai fait dans Angular 1.

<select id="classificationId"  data-role="listview" data-inset="true" ng-options="classification as classification for classification in classifications " ng-model="classification" x-ng-change="update(classification)">
<option value=''>Classifications</option></select><select id="classificationId" data-role="listview" data-inset="true" ng-options="classification as classification for classification in classifications " ng-model="classification" x-ng-change="update(classification)"><option value=''>Classifications</option></select>

Editer (du commentaire à la réponse) 

export class JobsearchPage { 
    selectedClassification:string; 
    constructor(http: Http, 
        nav: NavController, 
        messagesService:MessagesService, navParams:NavParams) { 
      this.http = http;
      this.messagesService = messagesService; 
      this.nav = nav; 
      this.classifications = new Array("t9it", 'uitut');
      console.log('STP selected'+selectedClassification); 
  } 
}
angularionic2ionic2-select
6
happycoder

Je n'utilise pas Ionic mais je suis presque sûr que ngModel devrait pointer sur un champ qui contient (ou est assigné à) l'option sélectionnée et non la liste complète des options possibles

<ion-select [(ngModel)]="selectedClassification" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" value="key" [checked]="true">{{key}}</ion-option>

class MyComponent {
  selectedClassification:string;
}
2
Günter Zöchbauer

Vous pouvez essayer (ionChange) = 'func ($ event)' et func (event) {console.log (event);}

1
Praful vats

Même chose que @Gunter m'a dit que je ne connaissais pas trop ionic, mais oui, votre problème avec ngModel peut toujours indiquer un champ unique qui lui est attribué. pas tout l'objet/tableau/peu importe. 

Selon ce que je comprends, vous voulez obtenir l’option sélectionnée, c’est-à-dire que vous avez créé de manière dynamique. Il existe donc deux méthodes: soit vous avez défini [(ngModel)] sur une chaîne unique comme celle-ci.

<ion-select [(ngModel)]="selectedvalue" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" [value]="key" [checked]="true">{{key}}</ion-option>

ou une deuxième méthode consiste à appliquer un événement de modification à l’option de sélection de ce type.

<ion-select #newSelect (change)="selectedvalue = newSelect.value">
 <ion-option *ngFor="#key of classifications" [value]="key" [checked]="true">{{key}}</ion-option>

voici mon cas selectedvalue est la valeur de votre clé quelle option vous avez sélectionnée.

0
Pardeep Jain

Classe: aujourd'hui-input.ts

classe d'exportation TodayInputPage {

public _projectName: string;
public projectDetails: any;

}

HTML: today-input.html

     <ion-item no-lines>
      <ion-label>Project Name</ion-label>
      <ion-select type="text" [(ngModel)]="_projectName">
        <ion-option *ngFor="let p of projectDetails" value="{{p.projectName}}">
          {{p.projectName}}
        </ion-option>
      </ion-select>
    </ion-item>

Où projectDetails values ​​provient du service. 

objet projectDetails

{date: "03/04/2017", durée: "07:30", nom du projet: "XYZ"}, ...

_projectName dans votre classe conservera la valeur sélectionnée.

0
Vamsi konanki

Ce qui suit a fonctionné pour moi:

<ion-item>
    <ion-label>Select Name</ion-label>
    <ion-select type="text">
        <ion-option *ngFor="#userInfo of userInfos"  value="{{userInfo.id}}">{{userInfo.name}}</ion-option> 
    </ion-select>
</ion-item>

Pour certaines raisons. je ne sais pas pourquoi mais cela fonctionne quand même, même si vous ne déclarez pas [(ngModel)] 

0
LeRoy