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.

6

Hi Guys,

I am having this same issue with ionic-vue. Any idea how to solve it ?

7

I’ve never used Vue, but JavaScript is JavaScript. Have you read all the threads linked to in here?

8

Hi @rapropos,

On ion-select docs, I noticed just for react, there is an example using comparewith.

        <IonLabel>Users</IonLabel>
            <IonSelect compareWith={compareWith} value={selectedUsers} multiple onIonChange={e => setSelectedUsers(e.detail.value)}>
              {users.map(user => (
                <IonSelectOption key={user.id} value={user}>
                  {user.first} {user.last}
                </IonSelectOption>
              ))}

This is what I was looking for. It works for vue too.

Tks