Trying to show information in the frontend

Ionic Framework ionic-v3
1

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

MY TS

export class HomePage {
  options:BarcodeScannerOptions;
  encodText:string='';
  resul:string;
  encodedData:any={};
  scannedData:any={};
  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();
    console.log(data);

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

MY FRONTEND

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


</div>

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

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)
3

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.

4

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

5

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.

6

Ahaaa…Got your point!

7

I have tried that , but it does not working

8

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.