Ion-select with dynamic options in Ionic 2?

Question

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

Answer 1

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

Answer 2

Same as @Gunter said me too not familiar with ionic but yes may be your problem with ngModel which is always points to single field which is assigned to it. not the whole Object/Array/whatever.

Upto my understanding you want to get selected option which is you created dynamically so there are two methods you have either you have set [(ngModel)] to single string like this.

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

or second method is apply a change event to the select option like this.

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

here is my case selectedvalue is your key's value which option you have selected.

Answer 3

Class: today-input.ts

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

---

Where projectDetails values comes from service.

projectDetails object

{ date:"03/04/2017", duration:"07:30", projectName:"XYZ" },...

_projectName in your class will hold selected value.

Answer 4

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

Answer 5

The following worked for me :

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

For some reason. not sure why but it still works even if you do not state a [(ngModel)]