Import class into ionic 3 and error when instantiating class - ionic-framework

Question

I'm new to ionic 3 and I'm trying to register. I have a accounts screen called accounts.ts that gets in src/pages/accounts/accounts.ts and then I'm trying to create a class where DAO will be referring to that class, I created it in the following src/dao/dao-accounts.ts location.
Some errors are showing up
My first doubt is this, do you mind this current?
import {DAOContas} from '../../dao/da-contacts';
I am also wanting to return a list of data but an error appears like this
:
uncaught (im promisse): referrererror: value is not defined
referenceerror: value is not defined at new ContasPage
class dao-accounts.ts
export class DAOContas {
constructor()
{
this.list = [];
}
getList()
{
this.list = [
{descricao:"Alimentação"},
{descricao:"Lazer"},
{descricao:"Transporte"}
];
return this.list;
}
}
method ContasPage.ts
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { DAOContas } from '../../dao/dao-contas';
#Component({
selector: 'page-list',
templateUrl: 'contas.html'
})
export class ContasPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.dao = new DAOContas();
this.listcontas = this.dao.getList();
}
}
Error Occurs When Instantiating DAOContas

Answer 1

So the issue here relates to dependency injection pattern. See official documentation of how that works for more info.
Based on the code you provided it seems like the issue is with the way you organized your code and declared (or did not declare) certain variables.
In your ContasPage do ensure you:
import the class
declare the vars
do assignments in the constructor
So in your case you didn't declare the vars before the constructor:
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { DAOContas } from '../../dao/dao-contas';
#Component({
selector: 'page-list',
templateUrl: 'contas.html'
})
export class ContasPage {
// declare your vars here:
dao: any;
listcontas: any;
constructor(
public navCtrl: NavController
) {
this.dao = new DAOContas();
this.listcontas = this.dao.getList();
}
}
Same thing in your class you forgot to declare the var list:
export class DAOContas {
list: Array<{ descricao: string }>
constructor() {
this.list = [];
}
getList() {
this.list = [
{ descricao: "Alimentação" },
{ descricao: "Lazer" },
{ descricao: "Transporte" }
];
return this.list;
}
}
Also since your DAOContas to me looks like a data provider, I would probably think about turning it into a provider and injecting it into your page via constructor:
Make sure DAOContas is injectable:
import { Injectable } from '#angular/core'
#Injectable()
export class DAOContas {
list: Array<{ descricao: string }>
constructor() {
this.list = [];
}
getList() {
this.list = [
{ descricao: "Alimentação" },
{ descricao: "Lazer" },
{ descricao: "Transporte" }
];
return this.list;
}
}
Add it to your app.module.ts as provider:
import { DAOContas } from '../../src/providers/dao-contacts';
#NgModule({
declarations: [
bla
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
DAOContas,
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
TestProvider
]
})
export class AppModule { }
Finally inject it to your page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { DAOContas } from '../../providers/dao-contacts';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage2 {
listcontas: any;
constructor(
public navCtrl: NavController,
public dao: DAOContas
) {
this.listcontas = this.dao.getList();
console.log(this.listcontas)
}
}