android - 如何修复 'TypeError: Cannot read property ' 然后' of undefined TypeError : Cannot read property 'then' of undefined. ..'

Question

我将在本教程的帮助下使用条码扫描器和 SQLite 构建 Ionic 库存管理应用程序: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 Error: Uncaught (in promise): TypeError: Cannot read property 'then' of undefined TypeError: Cannot read property 'then' of undefined at new DataServiceService (data-service.service.ts:64) at _createClass (core.js:26976) at createProviderInstance (core.js:26941) at resolveNgModuleDep (core.js:26888) at NgModuleRef.get (core.js:27996) at resolveNgModuleDep (core.js:26908) at NgModuleRef_.get (core.js:27996) at resolveDep (core.js:28518) at createClass (core.js:28366) at createDirectiveInstance (core.js:28186) at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:21826) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at 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 needs plugins to run in browser

默认情况下不添加它们。所以你可以用 ionic cordova run browser

运行项目

---

OR 如评论中所述，模拟插件。 Tried it它奏效了:

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

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/