如何修复“TypeError：无法读取未定义的属性”然后“TypeError：无法读取未定义的属性”然后“…”

Question

在本教程的帮助下，我将使用条形码扫描仪和SQLite构建一个Ionic库存管理应用程序:https://www . tech iediaries . com/Ionic-Cordova-SQLite-Barcode-Scanner-product-Inventory-manager/

当我添加这段代码时:

 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);
              }); 

…到数据服务。ts我得到这个错误：

core . js:19866 ERROR ERROR:un catch(in promise):type ERROR:无法读取未定义类型的属性“then”ERROR:无法读取新DataServiceService(data-service . service . ts:64)at _ createClass(core . js:26976)createProviderInstance(core . js:26941)resolveNgModuleDep(core . js:26888)NgModuleRef . get(core . js:27999get(core . js:27996)at resolve dep(core . js:28518)at create class(core . js:28366)at createDirectiveInstance(core . js:28186)at resolve promise(zone . js:831)at resolve promise(zone . js:788)at zone . js:892 at zone delegate . push../node _ modules/zone . js/dist/zone . js . zone delegate . invoke task(zone . js:423)at object . oninvoke task(core . js:21826)at zone delegate . push..Zone.push上的/node _ modules/zone . js/dist/zone . js . zone delegate . invoke task(zone . js:422)..drainMicroTaskQueue(zone . js:601)处的/node _ modules/zone . js/dist/zone . js . zone . runtask(zone . js:195)

这是完整的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

运行离子服务时，您的代码将无法在浏览器中工作，因为：

正如这里提到的

科尔多瓦需要插件才能在浏览器中运行

默认情况下不会添加它们。所以你可以用离子科尔多瓦运行浏览器运行项目。

或者如评论中所述，模拟插件。试过了，它奏效了：

在应用程序模块中，模拟创建：

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

创建一个文件＜code＞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/