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

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.

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

I would suggest reading this thread in its entirety.

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>

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

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