6

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); 
  } 
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
happycoder
  • 927
  • 3
  • 13
  • 28

5 Answers5

2

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;
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank you Gunter, Im getting EXCEPTION: ReferenceError: selectedClassification is not defined. and selected value not assigning to select option component. 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); } – happycoder Feb 28 '16 at 08:58
  • Sounds like the HTML is not in the view of the same component otherwise it would find `selectedClassification` – Günter Zöchbauer Feb 28 '16 at 10:08
1

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

Praful vats
  • 85
  • 1
  • 2
  • 8
0

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.

Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
  • Your second option seems to work for me, but it gives below error.ReferenceError: selectedvalue is not defined, although I defined it in my class. selectedvalue;console.log('selectedvalue: '+ selectedvalue); – happycoder Feb 28 '16 at 07:39
  • i assumed `selectedvalue` as key of ngModel. and also try to initialize first as `selectedvalue:string = null` may it works for you. – Pardeep Jain Feb 28 '16 at 07:45
  • After setting selectedvalue:string = null; its returns as undefined. constructor(http: Http, nav: NavController, messagesService:MessagesService, navParams:NavParams) { this.http = http; this.messagesService = messagesService; this.nav = nav; this.selectedvalue:string = null; this.classifications = new Array("t9it", 'uitut'); } – happycoder Feb 28 '16 at 08:09
  • in the edited post there is no `selectedvalue` defined. – Pardeep Jain Feb 29 '16 at 05:24
0

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

LeRoy
  • 4,189
  • 2
  • 35
  • 46
0

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.

Vamsi konanki
  • 163
  • 9