Question

我将借助本教程https://www.techiediaries.com/ionic-cordova-sqlite-barcode-scanner-product-inventory-manager/

使用条形码扫描仪和SQLite构建Ionic库存管理应用程序

当我添加此代码时：

 constructor(public sqlite :SQLite) {
          console.log('Hello DataServiceProvider Provider')

              this.sqlite.create({name: "data.db", location: 
    "default"}).then((db : SQLiteObject) => {
                      this.database = db;
                  }, (error) => {
                      console.log("ERROR: ", error);
              });

...到data-service.service.ts我收到此错误：

core.js：19866错误错误：未捕获（按承诺）：TypeError：无法读取未定义TypeError的属性'then'：无法读取属性未定义的“ then” 在新的DataServiceService（data-service.service.ts：64）在_createClass（core.js：26976）在 createProviderInstance（core.js：26941）在resolveNgModuleDep（core.js：26888）在NgModuleRef .get（core.js：27996）在resolveNgModuleDep（core.js：26908）在NgModuleRef_.get（core.js：27996）在resolveDep（core.js：28518）在createClass（core.js：28366）在createDirectiveInstance（core.js：28186）在resolvePromise（zone.js：831）在resolvePromise（zone.js：788）在zone.js：892 在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask （zone.js：423）在Object.onInvokeTask（core.js：21826）在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask （zone.js：422）在Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask（zone.js：195）在排水微任务队列（zone.js：601）

这是整个data-service.service.ts代码：

import { Injectable } from '@angular/core';

import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';



@Injectable({
  providedIn: 'root'
})
export class DataServiceService {
  public database: SQLiteObject;

  productTable : string = `CREATE TABLE IF NOT EXISTS  products (
    id INTEGER PRIMARY KEY,
    sku TEXT,
    barcode TEXT,
    title TEXT NOT NULL,
    description TEXT,
    quantity REAL,
    unit VARCHAR,
    unitPrice REAL,
    minQuantity INTEGER,
    familly_id INTEGER,
    location_id INTEGER,
    FOREIGN KEY(familly_id) REFERENCES famillies(id),
    FOREIGN KEY(location_id) REFERENCES locations(id)
    );`;

familyTable : string = `CREATE TABLE IF NOT EXISTS famillies (
    id INTEGER PRIMARY KEY,
    reference VARCHAR(32) NOT NULL,
    name TEXT NOT NULL,
    unit VARCHAR);`;

locationTable : string = `CREATE TABLE IF NOT EXISTS locations (
        id INTEGER PRIMARY KEY,
        name TEXT NOT NULL);`;
//Date , Quantity , Unit Cost , Reason (New Stock - Usable Return - Unusable Return ) ,UPC (Universal Product Code ) Comment    
transactionTable : string = `CREATE TABLE IF NOT EXISTS transactions (
        id INTEGER PRIMARY KEY,
        date TEXT,
        quantity REAL,
        unitCost REAL,
        reason VARCHAR,
        upc TEXT,
        comment TEXT,
        product_id INTEGER,
        FOREIGN KEY(product_id) REFERENCES products(id));`;

        async createTables(){
          try {
            await this.database.executeSql(this.familyTable);
            await this.database.executeSql(this.locationTable);
            await this.database.executeSql(this.productTable);
            await this.database.executeSql(this.transactionTable);
          }catch(e){
              console.log("Error !");
          }
      }

        constructor(public sqlite :SQLite) {
          console.log('Hello DataServiceProvider Provider')

              this.sqlite.create({name: "data.db", location: "default"}).then((db : SQLiteObject) => {
                      this.database = db;
                  }, (error) => {
                      console.log("ERROR: ", error);
              }); 
    }

}

有人知道如何解决吗？

Answer 1

您可能要看的一件事是，构造函数是否在代码中的异步函数之前运行。如果是这样，请按照ngOnInit的思路来实现。

Answer 2

运行ionic serve时，您的代码无法在浏览器中运行，因为：

根据提到的here

Cordova需要插件才能在浏览器中运行

并且默认情况下不添加它们。因此，您可以使用ionic cordova run browser

运行项目

注释中也提到了

OR ，请模拟插件。 Tried it并有效：

在应用模块中，模拟create：

import { SQLite  , SQLiteDatabaseConfig , SQLiteObject } from '@ionic-native/sqlite';

class SQLiteMock {
public create(config: SQLiteDatabaseConfig): Promise<SQLiteObject> {
    return new Promise((resolve,reject)=>{
      resolve(new SQLiteObject(new Object()));
    });
  }
}

在提供者中标记它，例如：

{provide: SQLite, useClass: SQLiteMock},

在文件夹中创建文件sql.js，然后从此处复制内容：https://raw.githubusercontent.com/kripken/sql.js/master/js/sql.js

并添加到您的index.html：

<script src="assets/sql.js"></script>
<script src="build/polyfills.js"></script>
<script src="build/main.js"></script>

现在您的函数应该可以正常工作了。进行进一步的操作，建议您遵循我在此代码之前提供的链接，即https://www.techiediaries.com/mocking-native-sqlite-plugin/

如何解决'TypeError：无法读取未定义的属性'then'TypeError：无法读取未定义的属性'then'...'

2 个答案: