Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ion-select with dynamic options in Ionic 2?

I'm developing application in Ionic 2. I need to add ion-select options in dynamic way, but I'm stumped on something that is probably very simple. Here is my code snippet.

<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);
}

Output for console log:

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

I'm getting exception as well.

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]

Edit:

And its not setting its value to select options. I have done this in 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>

Edit (from comment to an answer)

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); 
  } 
} 
like image 556
happycoder Avatar asked Feb 28 '16 05:02

happycoder


2 Answers

I don't use Ionic but I'm pretty sure ngModel should point to a field that holds (or gets assigned to) the selected option not the entire list of possible options

<ion-select [(ngModel)]="selectedClassification" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" value="key" [checked]="true">{{key}}</ion-option>
class MyComponent {
  selectedClassification:string;
}
like image 106
Günter Zöchbauer Avatar answered Oct 31 '22 20:10

Günter Zöchbauer


You can try (ionChange)='func($event)' and func(event){console.log(event);}

like image 30
Praful vats Avatar answered Oct 31 '22 20:10

Praful vats