CODEWITHSUNDEEP
javascriptangularfirebase-realtime-databaseangularfire
user8587464
user8587464

Reputation:

How to Read Data from Firebase and Angular

I use read_CheckOuts to return the database but the ngFor doesn't work

Here is my code:

crud.service.ts

import { AngularFireDatabase} from '@angular/fire/database';

export class CrudService {

constructor(
    private db: AngularFireDatabase
 ) { }

read_CheckOuts() {
return this.db.list('/cart_checkouts');
}
}

check-out.component.ts

import { CrudService } from '../service/crud.service';

constructor(private crudService: CrudService)

this.crudService.read_CheckOuts().valueChanges().subscribe(data => {
this.cart_checkouts = data.map(e => {
        return {
        this:this.cart_checkouts = this.cart_checkouts 
        };
      })

This is how I try to display the read data:

check-out.component.html

<div *ngFor="let out of cart_checkouts">
        <div>
          <h5>Product Name: {{out.product_name}}</h5>
          <h6>quantity: {{out.quantity}} </h6>
          <p>Price: {{out.product_price}}</p>
          <img src="/assets/images/gallery/{{out.thumbnail}}">
        </div>
</div>

My firebase database looks like this:

cart_checkouts
-MPuEZ_CAdJ8L8s8FaEG
--checkoutProductName: "Adult Unisex Helmet"
--checkoutProductPrice: 4
--checkoutQuantity: 3
--checkoutThumbnail: "product-4.gif"

Upvotes: 0

Views: 844

Answers (2)

Kishore Dev
Kishore Dev

Reputation: 9

yes easily get data from realtime database..!!!

    getDataFromFirebase(){
       var _this = this;
         var firebase = require('firebase')
         let database = firebase.database()
         return new Promise((resolve, reject) => {
         const db = database .ref();
         const eventRef = db.child('/Table');
         const query = eventRef;
         query.on('value', snap => {
         snap.forEach(function(childSnapshot) {
         var data = childSnapshot.val();
         console.log("data: " + JSON.stringify(data));
     });
   });
  });
}

Upvotes: 1

user8587464
user8587464

Reputation:

This is the solution:

this.crudService.read_CheckOuts().valueChanges().subscribe(data => {
   this.cart_checkouts = data;
  });

 <div *ngFor="let out of cart_checkouts">
        <div>
          <h5>Product Name: {{out.checkoutProductName}}</h5>
          <h6>quantity: {{out.checkoutQuantity}} </h6>
          <p>Price: {{out.checkoutProductPrice}}</p>
          <img src="/assets/images/gallery/{{out.checkoutThumbnail}}">
        </div>
      </div>

Upvotes: 1

Related Questions