Ion-select with dynamic parameters in Ionic 2?

Question

I am developing an application in Ionic 2. I need to add ion selection parameters in dynamic mode, but I'm at a standstill for something, which 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 get an exception too.

 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 does not set a value for selecting parameters. I did 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 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 do not use Ionic, but I am sure that ngModel should point to the field that holds (or is assigned) the selected parameter, and not the entire list of possible parameters

 <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

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

Answer 3

Same as @Gunter said that I am not familiar with ionic either, but yes, maybe this is your problem with ngModel , which always points to one field that is assigned to it. not the whole object / array / independently.

By my understanding, you want to get the selected option that you created dynamically, so there are two methods that you either set [(ngModel)] on the same line as this.

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

or the second method applies the change event to a selection 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 selectedvalue case - your key value you have chosen.

Answer 4

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 did not specify [(ngModel)]

Answer 5

Class: today-input.ts

TodayInputPage export class {

 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 ​​come from the service.

projectDetails object

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

_projectName in your class will hold the selected value.