无法在 Ionic 中使用 SQLite 创建数据库

编程问答 2022-05-10

问题描述

我正在尝试使用 ionic 中的 sqlite 插件创建一个数据库。我想创建一个表并在表中存储一些注册详细信息。这是我的代码。我查看了官方文档，但没有成功。

这是我的注册页面

-register.page.ts

import { Component,OnInit } from '@angular/core';
import { FormBuilder,FormGroup,Validators } from '@angular/forms';
import { sqlite,sqliteObject } from '@ionic-native/sqlite/ngx';

@Component({
  selector: 'app-register',templateUrl: './register.page.html',styleUrls: ['./register.page.scss'],})
export class RegisterPage implements OnInit {

  registrationform: FormGroup

  private database: sqliteObject;

  constructor(private fb: FormBuilder,private sqlite: sqlite) {

    this.registrationform = fb.group({

      firstname: [''],lastname: [''],date: [''],username: ['',Validators.required],password: ['',Validators.required]

    });
      this.sqlite.create({
      name: 'data.db',location: 'default'
    })
      .then((db: sqliteObject) => {
    
        this.database =db;
        db.executesql('create table if not exists items(name VARCHAR(32))',[])
        .then(() => console.log('Executed sql'))
        .catch(e => console.log(e));
    
    
      })
      .catch(e => console.log(e))        

  }
 ngOnInit() {

  }

}

-register.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { RegisterPageRoutingModule } from './register-routing.module';

import { RegisterPage } from './register.page';
import { IonicStorageModule } from '@ionic/storage-angular';


@NgModule({
  imports: [
    CommonModule,FormsModule,IonicModule,RegisterPageRoutingModule,IonicStorageModule.forRoot(),ReactiveFormsModule,],declarations: [RegisterPage]
})
export class RegisterPageModule {}

-app.module.ts

import { NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule,IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { sqlite,sqliteObject } from '@ionic-native/sqlite/ngx';

@NgModule({
  declarations: [AppComponent],entryComponents: [],imports: [browserModule,IonicModule.forRoot(),AppRoutingModule],providers: [{ provide: RouteReuseStrategy,useClass: IonicRouteStrategy },sqlite],bootstrap: [AppComponent],})
export class AppModule {}

-错误

Native: tried accessing the sqlite plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
    at new RegisterPage (register.page.ts:32)
    at NodeInjectorFactory.RegisterPage_Factory [as factory] (ɵfac.js? [sm]:1)
    at getNodeInjectable (core.js:3596)
    at instantiateRootComponent (core.js:10141)
    at createRootComponent (core.js:12454)
    at ComponentFactory$1.create (core.js:25102)
    at ViewContainerRef.createComponent (core.js:23142)
    at IonRouterOutlet.activateWith (ionic-angular.js:2926)
    at ActivateRoutes.activateRoutes (router.js:2129)
    at router.js:2080
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28561)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

谁能告诉我我在这里做错了什么？

解决方法

如果您在计算机上的浏览器中对此进行测试，则会收到此错误，因为cordova 只能在设备上运行。我建议使用 ionic 的存储：https://github.com/ionic-team/ionic-storage。它将调整存储类型以适应环境 - 浏览器使用 localStorage，如果需要，设备使用 mysql。

angularangularionic-frameworkionic2ionic4sqlite