我是离子和Angular 的新手。是否可以使用***ion-select-option***的参考值,以便在***ion-input***中使用它。我使用id作为本地SQLite数据库中的[value]。其想法是每当我从离子选择中选择时,离子输入中的值将被填充。当我尝试在离子输入中使用{{dev.price}}时,它没有为我提供值。这是我HTML代码。
<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>
这是我的SQLite数据库
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);
这是我的数据库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();
});
}
1条答案
按热度按时间epggiuax1#
要实现这一点,您可以在每次选定值更改时使用由ion-select发出的ionChange事件,并创建一个函数来处理此更改。
然后,在component.ts中,使用选定产品的id值在devices数组中查找它,我还建议在组件上创建一个变量来存储选定设备的值。
这样,所选产品可用于在输入端显示。