Is it possible to use the reference value of ion select

Issue

I'm new to ionic and angular. Is it possible to use the reference value of ion-select-option so that it can be used in ion-input. I'm using id as a [value] from local SQLite database. The idea is whenever I select from ion-select the value in ion-input would be filled. When I tried using the {{dev.price}} in the ion-input it didn't get me the value. here is my html code.

<ion-item>
  <ion-label>Item Type</ion-label>
  <ion-select [(ngModel)]="product.creator">
    <ion-select-option 
    *ngFor="let dev of devices" [value]="dev.id">
       {{ dev.name }} {{ dev.price }}
    </ion-select-option>
  </ion-select>
</ion-item>
<ion-item>
  <ion-label>
    Item Price
  </ion-label>
  <ion-input disabled  
  [(ngModel)]="product.amount">
  {{ dev.price }}
</ion-input>
</ion-item>

and here is my SQLite database

CREATE TABLE IF NOT EXISTS device(id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT UNIQUE, info INTEGER,price INTEGER, amount INTEGER, total INTEGER);

CREATE TABLE IF NOT EXISTS product(id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, creatorId INTEGER, item_date DATE, price INTEGER, amount INTEGER, total INTEGER NOT NULL);

and here is my database.service.ts

    import { Platform } from '@ionic/angular';
import { Injectable } from '@angular/core';
import { SQLitePorter } from '@ionic- 
native/sqlite-porter/ngx';
import { HttpClient } from 
'@angular/common/http';
import { SQLite, SQLiteObject } from '@ionic- 
native/sqlite/ngx';
import { BehaviorSubject, Observable } from 
'rxjs';



export interface Dev {
id: number,
name: string,
info: number,
price: number,
amount: number,
total: number,
}

@Injectable({
providedIn: 'root'
})
export class DatabaseService {
private database: SQLiteObject;
private dbReady: BehaviorSubject<boolean> = new 
BehaviorSubject(false);

devices = new BehaviorSubject([]);
products = new BehaviorSubject([]);

constructor(private plt: Platform, private 
sqlitePorter: SQLitePorter, private sqlite: 
SQLite, private http: HttpClient) {
this.plt.ready().then(() => {
  this.sqlite.create({
    name: 'devices.db',
    location: 'default'
  })
  .then((db: SQLiteObject) => {
      this.database = db;
      this.seedDatabase();
  });
  });
 }

async loadProducts() {
let query = 'SELECT product.name, product.id, 
product.item_date, product.amount, 
product.price, product.total, device.name AS 
creator FROM product JOIN developer ON 
device.id = product.creatorId';
const data = await 
this.database.executeSql(query, []);
let products = [];
if (data.rows.length > 0) {
  for (var i = 0; i < data.rows.length; i++) {
    products.push({
      name: data.rows.item(i).name,
      id: data.rows.item(i).id,
      creator: data.rows.item(i).creator,
      item_date: data.rows.item(i).item_date,
      amount: data.rows.item(i).amount,
      price: data.rows.item(i).price,
      total: data.rows.item(i).total,
    });
  }
 }
 this.products.next(products);
 }

addProduct(name: any, creator: any, item_date: 
Date, amount: number, price: number, total: 
any) {
let data = [name, creator, item_date, amount, 
price, total];
return this.database.executeSql(`INSERT INTO 
product (name, creatorId, item_date, amount, 
price, total) VALUES (?, ?, ?, ?, ?, ?)`, 
data).then(data => {
 this.loadProducts();
});
}

Solution

To accomplish this, you can use the ionChange event emitted by ion-select every time the selected value change, and create a function to handle this change.

<ion-select [(ngModel)]="product.creator" (ionChange)="handleChange($event)">
  <ion-select-option 
  *ngFor="let dev of devices" [value]="dev.id">
     {{ dev.name }} {{ dev.price }}
  </ion-select-option>
</ion-select>

Then, in component.ts, use the id value from selected product to find it on the devices array. I also suggest creating a variable on the component to store the value of the selected device.

handleChange(event) {
  const { value } = event.detail;
  const index = this.devices.findIndex((item) => item.id === value);
  if (index > -1) {
    this.selectedProduct = this.devices[index]; 
  }
}

This way the selected product can be used to be displayed on input.

<ion-input [value]="selectedProduct.price" disabled></ion-input>
<ion-input [value]="selectedProduct.amount" disabled></ion-input>

Answered By - mellunar