Reading Data from Firebase Doesn't Work

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

Here is my code:


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

export class CrudService {

    private db: AngularFireDatabase
 ) { }

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


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

constructor(private crudService: CrudService)

this.crudService.read_CheckOuts().valueChanges().subscribe(data => {
this.cart_checkouts = => {
        return {
		this:this.cart_checkouts = this.cart_checkouts 

This is how I try to display the read data:


<div *ngFor="let out of cart_checkouts">
          <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}}">

Is there data? Add a console.log in the subscribe in your component.

Also your subscribe is assigning this.cart_checkouts multiple times for some reason, which may be the reason.

You shouldn’t need map.

So you should just have:

this.crudService.read_CheckOuts().valueChanges().subscribe(data => {
   console.log('checkouts', data);
   this.cart_checkouts = data;

Thanks, bradtaniguchi. That worked like a charm.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.