Reading Data from Firebase Doesn't Work

[makamo66]

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>

[bradtaniguchi]

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;
})

[makamo66]

Thanks, bradtaniguchi. That worked like a charm.