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

Question

我即将在本教程的帮助下使用 Barcode Scanner 和 SQLite 构建一个 Ionic Inventory Management 应用程序：https://www.techiediaries.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);
              }); 

...到 data-service.service.ts 我得到了这个错误：

core.js:19866 ERROR 错误：未捕获（承诺中）：TypeError：不能 读取未定义类型错误的属性“然后”：无法读取属性 '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) 在 drainMicroTaskQueue (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

运行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/

Answer 2

您可以查看的一件事是构造函数是否在代码中的异步函数之前运行。如果是这样，请考虑在 ngOnInit 上实现一些类似的东西。