Trying to show information in the frontend


Hello !

Im trying to print my information that i sent in my frontend but it does not showing nothing , i do not know whats going on,my query is fine because when i print in console its works fine


export class HomePage {
  public resultado: string;

  public product=[];
  // public product= {};

public resultadoref: firebase.database.Reference = firebase.database().ref('/productos');

  constructor(public fdb: AngularFireDatabase,public navCtrl: NavController,
  public scanner:BarcodeScanner,private alertCtrl: AlertController) {


  public cargarvalor(){
    var that= this;
    var referenceresultado= this.resultadoref.orderByChild('Producto').equalTo(this.resultado);
    referenceresultado.on('value', function(snapshot){
    var data = snapshot.val();
    that.product= snapshot.val();

    // this.product=snapshot.val();


	<ion-input type="text" [(ngModel)]="resultado"></ion-input>
	<button ion-button (click)="cargarvalor()">Buscar</button>


	<div class="row header">
      <div class="col">Producto</div>
      <div class="col">Descripcion</div>
      <div class="col">Precio</div>
{{ product.Producto }} {{ product.Valor }} {{ product.Descripcion }}


Hey @Daniel1826. Try changing these things in your .ts file:

product: any;   //instead of public product = [];
this.product = data;     //insert this line after you do console.log(data)


This makes things worse on two fronts: you’re abusing any and you’re recommending taking away an initialization that is important.

I recommend everybody turn on strict and noImplicitAny in their tsconfig.json. That way the build process will yell at you if you try to make mistakes like this.


Hey @rapropos. Please can you explain me why type “any” is used?


I’m saying it shouldn’t be used at all, especially in new application code. With a business object like “product”, one should declare an interface like:

export interface Product {
  code: string;
  description: string;
  manufacturer: string;
  price: number;
  instock: number;

…and then use Product and Product[] and so on in application code.


Ahaaa…Got your point!


I have tried that , but it does not working


I don’t use Firebase, but it seems sketchy to me to be injecting fdb and yet not using it to set resultadoref. I would guess that since you are going behind AngularFire’s back with firebase.database you are getting something that is operating outside of Angular’s zone. Incidentally, you don’t need all that that = this garbage if you just use fat arrow functions instead of typing function, and you should always prefer let to var.