Ionic 是否可以使用离子选择的参考值

3z6pesqy  于 2022-12-20  发布在  Ionic
关注(0)|答案(1)|浏览(126)

我是离子和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();
});
}
epggiuax

epggiuax1#

要实现这一点,您可以在每次选定值更改时使用由ion-select发出的ionChange事件,并创建一个函数来处理此更改。

<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>

然后,在component.ts中,使用选定产品的id值在devices数组中查找它,我还建议在组件上创建一个变量来存储选定设备的值。

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

这样,所选产品可用于在输入端显示。

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

相关问题