Getting the value of an ion-list


#1

Hello everyone, I have this HTML code

   <ion-list>
        <ion-item>
          <ion-label>Contract</ion-label>
          <ion-select [(ngModel)]="mySelect">
            <ion-option *ngFor="let p of MyContracts" [value]="p.oid">{{p.ContractNumber}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>

My MyContracts array is defined like this
public MyContracts:Array<{oid: string, ContractNumber: string}>;

My goal is to get the MyContracts.oid element when the user selects an item from the list, unfortunately, mySelect doesn’t return the value of the selection, but the caption (ie, MyContracts.ContractNumber), how can I do that?
Thanks


#2

Hi @romulus64,

<ion-list>
        <ion-item>
          <ion-label>Contract</ion-label>
          <ion-select [(ngModel)]="mySelect" name="mySelect" (ionChange)="oncl(mySelect);">
            <ion-option *ngFor="let p of MyContracts" [value]="p.oid">{{p.ContractNumber}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>

This would be the HTML code and


export class HomePage {
	public MyContracts:any = [];
	public mySelect:any;
  constructor(public navCtrl: NavController) {

  	this.MyContracts = [{
  		'oid':'ok',
  		'ContractNumber':'n1',
  	},
  	{
  		'oid':'2ok',
  		'ContractNumber':'n2',
  	},
  	{
  		'oid':'3ok',
  		'ContractNumber':'n3',
  	},
  	{
  		'oid':'4ok',
  		'ContractNumber':'n',
  	}];

  	console.log('this.MyContracts',this.MyContracts);
  }

  oncl(id) {
  	console.log('id',id);
  }

}

this would be component file.

Hope this will help you.


#3

Hello @addwebsolution
The code I showed was working, I finally understood my problem, it was while I was populating the list, the oid column had the undefined value, by solving that, I can get the hidden value from the selection.
Thanks anyway.