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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.