How to get all the information of the item from the ion select?

Issue

I load a list of items from the Firestore and put them in the ion select, the problem is that as each item has an id I need to get the id of the selection.

This is my code to get the items in the controller.

this.MesasColeccion = this.mesasser.getMesaListfromFirestore();
this.MesasColeccion.snapshotChanges().subscribe(mesasLista => {
  this.mesas  = mesasLista.map(mesa => {
    return {
      nombre: mesa.payload.doc.data().nombre,
      capacidad: mesa.payload.doc.data().capacidad,
      estado: mesa.payload.doc.data().estado,
      union:mesa.payload.doc.data().union,
      id: mesa.payload.doc.id
    }
  });

  this.mesas2  = mesasLista.map(mesa2 => {
    return {
      nombre: mesa2.payload.doc.data().nombre,
      capacidad: mesa2.payload.doc.data().capacidad,
      estado: mesa2.payload.doc.data().estado,
      union:mesa2.payload.doc.data().union,
      id: mesa2.payload.doc.id
    }
  });
});
this.MesasObservable = this.MesasColeccion.valueChanges();

This is the code to show the list in the ion-select:

<ion-card>
<ion-card-content>
  <ion-item id="mesas-select1">
  <ion-label >
    Mesa #1:
  </ion-label>
  <ion-select  [(ngModel)]='Gruposobj.nombrem1' name="Mesa#1" placeholder="Selecciona la mesa"  >
    <ion-option   *ngFor="let mesa of mesas">
      {{mesa.nombre}}
    </ion-option>
  </ion-select>
  </ion-item>

  <ion-item id="mesas-select1">
    <ion-label >
      Mesa #2:
    </ion-label>
    <ion-select [(ngModel)]='Grupos2obj.nombrem2' name="Mesa#2" placeholder="Selecciona la mesa" >
      <ion-option *ngFor="let mesa2 of mesas2" >
        {{mesa2.nombre}}
      </ion-option>
    </ion-select>
    </ion-item>

The ngmodel assigns the selected option to the attribute in the GruposModel. In this case the object of vinculacionmodel is Gruposobj and Grupos2obj. When the user selects an item of ionic-select, I need to get the id selected from an item. Because I will assign this mesa.id && mesa2.id to the vinculacionmodel with Gruposobj.mesa1 && Gruposobj.mesa2.

This is the vinculacionmodel:

export interface vinculacionmodel {
    
    id?:string;
    mesa1:string;
    mesa2:string;
    mesa3:string;
    nombrem1:string;
    nombrem2:string;
    nombrem3:string;
}

Solution

As you want ID from the object you can implement ionChange event on your ion-select and will get the selected object.

Please refer to the below code for more detail.

<ion-select [(ngModel)]='Grupos2obj.nombrem2' name="Mesa#2" placeholder="Selecciona la mesa" (ionChange)="onSelectChange($event)">
<ion-option *ngFor="let mesa2 of mesas2" [value]="mesa2['id']">
    {{mesa2.nombre}}
</ion-option>
</ion-select>

ionChange event in .ts file:

onSelectChange(selectedValue: any) {
    //Selected Value Id will get as param ==> selectedValue
    //Selected Object
    var item = this.mesas2.find(item => item['id'] === selectedValue);
    //Position of object in array
    var postion = this.mesas2.findIndex(item => item['id'] === selectedValue);
}

Hope this will help you to get your ID from ios-select.

Answered By - CodeChanger