Can't get results from SQLStorage when ngOnChange is called

Ionic Framework ionic-v3
1

Hi all,
I can’t find a way the solve this issue.
I’m doing a form that is going to have 10 components.
Until now i did 5 and the last one is not working properly.
Here’s what i’m trying to do:

1 - When the component loads, ngOnInit is fired and it get all the equipment models related to the input “brand_id” from the database.(This step is working)

2 - When the “brand_id” changes value, the function ngOnChanges() is fired and what was supposed to happen was that the function getEquipmentsModel() return the equipment models of this new brand_id.(This step is not working)

The ngOnChanges() is been called and also the function getEquipmentsModel().
The right value of brand_id is been sent to the function that gets data from the database.
The this.daoEquipmentModels.getModelsByBrand() is always returning an empty array.

Am i missing something?

Code of the component:

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {DAOEquipmentModel} from '../../dao/dao-equipment-model';

@Component({
  selector: 'equipment-model-select',
  templateUrl: 'build/components/equipment-model-select/equipment-model-select.html',
  inputs: ['brand_id', 'equipment_model_id'],
  outputs: ['changeEquipmentModel']
})
export class EquipmentModelSelect {
  constructor() {
    this.equipmentModels = [];
    this.daoEquipmentModels = new DAOEquipmentModel();
    this.changeEquipmentModel = new EventEmitter();
  }

  ngOnInit(){
    this.getEquipmentModels();
  }

  ngOnChanges(changes){
    this.getEquipmentModels();
  }

  getEquipmentModels(){
    this.daoEquipmentModels.getModelsByBrand(this.brand_id, (equipmentModels) => {
      this.equipmentModels = equipmentModels;
    });
  }

Code of the data access object:

import {Storage, SqlStorage} from 'ionic-angular';

export class DAOEquipmentModel {
  constructor(){
this.storage = new Storage(SqlStorage);
  }

  getModelsByBrand(brand_id, successCallback){
this.storage.query("SELECT * FROM models WHERE brand_id = ? ORDER BY name",[brand_id]).then((data) => {

  var equipmentModels = [];
  for(var i = 0; i < data.res.rows.length; i++){
    equipmentModels.push(data.res.rows.item(i));
  }
  return successCallback(equipmentModels);
});
  }


}

Any idea will be helpful, i’m stuck on this since morning.
Thanks

2

This code is not very Angular on a variety of fronts.

  • pick a casing convention and stick to it. most common in JavaScript is dromedaryCase.

  • don’t instantiate DAOEquipmentModel manually. use DI by declaring it in a providers array somewhere, and let the injector manage it for you by passing it into the component’s constructor.

  • promises and observables were invented so that nobody would ever name another function parameter *_callback. callbacks are a disaster. return a promise from getModelsByBrand:

getModelsByBrand(brandId) {
  return this.storage.query(...)
  .then((sqlrv) => {
    // turn sqlrv into equipmentModels
    return equipmentModels;
  });
}

getEquipmentModels() {
  this.daoEquipmentModels.getModelsByBrand(this.brandId).then((models) => {
    this.equipmentModels = models;
  });
}
  • don’t use SELECT * in SQL. when fields are added or removed from the schema, it silently starts behaving differently and will cause you subtle and tough-to-track bugs.
1 Like
3

Thank you for your feedback.
I will use the tips, improve my code an see if it solves my problem.
Thank you very much.
Have a nice day.