View Firebase Child in Ionic

Question

Hello!

I have a project on Ionic that I need to display some promotions, however I need to "update" them after the app released. For this I’m using Firebase!

I managed to display in the app what I need, but need to filter the Child.

This is Data Service . ts

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseObjectObservable, AngularFireAuth, FirebaseListObservable } from 'angularfire2';

@Injectable()
export class Databaseservice {

  constructor(private _af: AngularFire) {
  }

  public listProdutos(): FirebaseListObservable<any[]>{
    return this._af.database.list('/produtos/produto1');
  }
}

This is the page script that will be displayed the products . ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Databaseservice } from "../../providers/databaseservice";
import { FirebaseListObservable } from "angularfire2";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  produtos:FirebaseListObservable<any[]>

  constructor(public navCtrl: NavController, public db: Databaseservice) {
    this.produtos = this.db.listProdutos();
  }

}

This is the page

<ion-header>
  <ion-navbar>
    <ion-title>
      Teste
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <h2 class="text" *ngFor="let item of produtos | async">
    {{item.$value}}
  </h2>

</ion-content>

This is the tree at Firebase

And this is the result in the app

I’d like to know how to display Child’s "name" in a tag Example: {{name. $value}}

and display Child "price" in another tag Example: {price. $value}}

So I can Manipulate the location on the page ( html ) to be displayed. From now on Thank you!

=

Answer 1

where you have {{item. $value}} exchange for {{item.name}} or {{item.price}}

in this case after the point comes the name of the firebase field.