Hello.
I’m new in this, I’m following a tutorial in order to learn the framework.
Basically I want to insert into the DB from a input a title and an amount.
But when use the two way data binding ngModel I get this ERROR:
Runtime Error
Cannot read property ‘title’ of undefined
Stack
TypeError: Cannot read property ‘title’ of undefined
at Object.View_AddingPage_0.co [as updateDirectives] (ng:///AppModule/AddingPage.ngfactory.js:529:31)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/vendor.js:13165:21)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:12503:14)
at callViewAction (http://localhost:8100/build/vendor.js:12866:21)
at execComponentViewsAction (http://localhost:8100/build/vendor.js:12798:13)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:12509:5)
at callViewAction (http://localhost:8100/build/vendor.js:12866:21)
at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:12824:17)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:12504:5)
at callViewAction (http://localhost:8100/build/vendor.js:12866:21)
Extra info:
Ionic Framework: 3.5.3
Ionic App Scripts: 2.0.2
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 8.2.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
And here is the code to show you what I’m doing.
In advance… Thanks by your help.
database.ts:
//Esto podria verse como el modelo de Datos.
//Donde realizamos todo tipo de operaciones con ellos e.g.:
//Update, Insert, Delete, Read.
import Dexie from 'dexie';
//Clase principal que hereda de DEXIE para la creacion de la BD
export class TransactionAppDB extends Dexie{
//Declaracion de las tablas con su respectiva interfaz
//y el tipo de dato de la PK
transactions: Dexie.Table<ITransaction, number>;
//Sobreescritura del constructor asignando el nombre de la BD
constructor(){
super("MoneyMapDB");
this.version(1).stores({
//Declaracion de las tablas y sus campos
transactions:'++tid, amount, lat, lng, title, imgUrl'
});
//Mapeamos la tabla transactions con la clase Transaction
this.transactions.mapToClass(Transaction);
}
}
//Interfaz que define a la tabla Category
export interface ICategory{
}
//Interfaz que define a la tabla Transaction
export interface ITransaction{
tid?: number;
amount: number;
lat: number;
lng: number;
title: string;
imgUrl: string;
}
//Clase implementa la interfaz para la tabla transactions
//Esta clase define la tabla Transaction y sus operaciones CRUD.
export class Transaction implements ITransaction{
//Se debe declarar las mismas propiedades de la Interfaz que se implementa.
tid?: number;
amount: number;
lat: number;
lng: number;
title: string ;
imgUrl: string;
//Colocar el ? indica que es un campo opcional
constructor(amount:number, title:string,tid?:number,
lat?:number, lng?:number, imgUrl?:string,){
this.amount = amount;
this.title = title;
if(tid) this.tid = tid;
if(lat) this.lat = lat;
if(lng) this.lng = lng;
if(imgUrl) this.imgUrl = imgUrl;
}
//Metodo para almacenar los datos en la tabla
saveRecord(){
return db.transactions.add(this);
}
//Metodo que devuelve y muestra todas las transacciones de la tabla.
static ShowAll(){
//Este codigo retorna un Promise
//Agregando "reverse()" luego de: orderBy("tid") ordena de mayor a menor.
return db.transactions.orderBy("tid").toArray();
}
}
//Se crea una instancia de la clase que define la BD y tablas y se exporta
// para ser importada en el archivo APP.COMPONENTS
export let db = new TransactionAppDB();
transaction.js
import { AddingPage } from '../adding/adding';
import { Transaction } from './../../database';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
//import {NgFor} from '@angular/common';
/**
* Generated class for the TransactionsPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-transactions',
templateUrl: 'transactions.html',
})
export class TransactionsPage {
title:string = "Movements";
//Propiedad declarada para almacenar la consulta de la tabla transactions
transactions : any;
//Se crea una propiedad para asignarle el valor de la Clase AddingPage
addPage = AddingPage;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
//console.log('ionViewDidLoad TransactionsPage');
//console.log('Transactions Page');
//Ejemplo:
//Se crea una variable que instancia la clase Transaction (Importada en la cabecera)
// para poder registrar los valores en tabla invocando el metodo SAVE().
//let transaction = new Transaction(500, 'Ingreso Uno');
//transaction.saveRecord();
//Se llama a la funcion creada abajo fuera del bloque de ionViewDidLoad
//Esta funcion lista todos los registros en la Tabla "transactions"
this.loadTransactions();
}
//Esta funcion llama a la clase Transaction dentro del fichero "databse"
loadTransactions(){
//Se llama a la clase y al metodo que se creo "ShowAll".
Transaction.ShowAll()
//Dado que retorna un promise, se debe llamar al metodo "then()" el cual se ejecuta
//una vez que se completa la consulta en la Base de Datos.
//Si solo se va a incorporar una funcion dentro del metodo then() no es necesario usar las {}
//luego de la fat arrow "=>" de lo contrario si es necesario.
.then((results)=>{
//Los resultados que trae la consulta los almacenamos en una propiedad "transactions" declarada arriba.
this.transactions = results
//Esta otra funcion muestra o lista los datos de la consulta en la vista o pagina.
console.log(this.transactions);
});
}
}
adding.ts
import { Component, NgModule } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Transaction } from './../../database';
/**
* Generated class for the AddingPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-adding',
templateUrl: 'adding.html',
})
export class AddingPage {
record: Transaction;
Addtitle:string = "Add Transaction";
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
//console.log('ionViewDidLoad AddingPage');
this.record = new Transaction(null,"");
}
saveRecord(){
this.record.saveRecord();
}
}
adding.html
import { Component, NgModule } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Transaction } from './../../database';
/**
* Generated class for the AddingPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-adding',
templateUrl: 'adding.html',
})
export class AddingPage {
record: Transaction;
Addtitle:string = "Add Transaction";
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
//console.log('ionViewDidLoad AddingPage');
this.record = new Transaction(null,"");
}
saveRecord(){
this.record.saveRecord();
}
}