Ion-select does not show selected option when value is an object type

Ionic Framework
#1

I am trying to use select-option values as objects.

 <ion-item>
    <ion-label>Choose</ion-label>
    <ion-select [value]="{key:'abc',value:'ABC'}">
      <ion-select-option value="{key:'abc',value:'ABC'}">ABC</ion-select-option>
      <ion-select-option value="{key:'pqr',value:'PQR'}">PQR</ion-select-option>
      <ion-select-option value="{key:'xyz',value:'XYZ'}">XYZ</ion-select-option>
    </ion-select>
  </ion-item>

When popup opens it does not show the selected value.

image
image560×517 16.1 KB

#2

JavaScript is a terrible language, so this isn’t really your fault.

I would suggest reading this thread in its entirety.

#3

Hello @pratikpdw ,
Please try with ngModel. I tried on Ionic 5 it works. Please search on $event . You can use it like (ionChange) = “myfunction($event)” . You can call any variable in selected value.
TS Code:

export class Tab2Page {
   test={
  selected:'{"key":"abc","value":"ABC"}',
  selectedObject: {key:"abc",value:"ABC"}
  }
  constructor() {}

  stringToObject(selected){
    this.test.selectedObject = JSON.parse(selected);
    console.log(this.test.selectedObject);
    console.log(this.test.selectedObject.key);
  }
}

HTML

    <ion-item>
        <ion-label>Choose</ion-label>
        <ion-select [(ngModel)]="test.selected" (ionChange)="stringToObject(test.selected)">
            <ion-select-option value='{"key":"abc","value":"ABC"}'>ABC</ion-select-option>
            <ion-select-option value='{"key":"pqr","value":"PQR"}'>PQR</ion-select-option>
            <ion-select-option value='{"key":"xyz","value":"XYZ"}'>XYZ</ion-select-option>
        </ion-select>
    </ion-item>
#4

What you have there are not objects. They are strings. Strings do not suffer the same gnarly comparison problems inherent in the design of JavaScript that objects do.h

#5

Thanks for the warning. It escaped my attention, I made the necessary arrangements.