Ionic html Button does not call event

@sahibsingh wrote:

Hello Everyone i am using the below code to use sqlite. But the problem is on clicking the buttons click event does not fire and it does not call functions. I am using ionic 5.4.6.

tab2.page.html



Ionic SQLite code

<ion-button expand=“block” (click)=“createDB()”>
Create DataBase

<ion-button expand=“block” (click)=“createTable()”>
Create Table

<ion-button expand=“block” (click)=“getRows()”>
Get Rows

Insert Row Row ID Name Delete {{item.pid}} {{item.Name}}

tab2.page.ts
import { Component } from ‘@angular/core’;

import { SQLite, SQLiteObject } from ‘@ionic-native/sqlite/ngx’;
import { Platform } from ‘@ionic/angular’;

@Component({
selector: ‘app-tab2’,
templateUrl: ‘tab2.page.html’,
styleUrls: [‘tab2.page.scss’],
})
export class Tab2Page {

databaseObj: SQLiteObject;
name_model: string = “”;
row_data: any = ;
readonly database_name: string = “freaky_datatable.db”;
readonly table_name: string = “myfreakytable”;

constructor(
private platform: Platform,
private sqlite: SQLite
) {
this.platform.ready().then(() => {
this.createDB();
}).catch(error => {
console.log(error);
})
}

createDB() {
this.sqlite.create({
name: this.database_name,
location: ‘default’
})
.then((db: SQLiteObject) => {
this.databaseObj = db;
alert(‘freaky_datatable Database Created!’);
})
.catch(e => {
alert("error " + JSON.stringify(e))
});
}

createTable() {
this.databaseObj.executeSql(‘CREATE TABLE IF NOT EXISTS ’ + this.table_name + ’ (pid INTEGER PRIMARY KEY, Name varchar(255))’, )
.then(() => {
alert(‘Table Created!’);
})
.catch(e => {
alert("error " + JSON.stringify(e))
});
}

insertRow() {
if (!this.name_model.length) {
alert(“Enter Name”);
return;
}
this.databaseObj.executeSql(‘INSERT INTO ’ + this.table_name + ’ (Name) VALUES ("’ + this.name_model + ‘")’, )
.then(() => {
alert(‘Row Inserted!’);
this.getRows();
})
.catch(e => {
alert("error " + JSON.stringify(e))
});
}

getRows() {
this.databaseObj.executeSql("SELECT * FROM " + this.table_name, )
.then((res) => {
this.row_data = ;
if (res.rows.length > 0) {
for (var i = 0; i < res.rows.length; i++) {
this.row_data.push(res.rows.item(i));
}
}
})
.catch(e => {
alert("error " + JSON.stringify(e))
});
}

deleteRow(item) {
this.databaseObj.executeSql("DELETE FROM " + this.table_name + " WHERE pid = " + item.pid, )
.then((res) => {
alert(“Row Deleted!”);
this.getRows();
})
.catch(e => {
alert("error " + JSON.stringify(e))
});
}
}

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 { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { SQLite } from ‘@ionic-native/sqlite/ngx’;
@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
SQLite,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

Posts: 1

Participants: 1

Read full topic