Not able to Retrieve data from firebase using keys in angular 2

Question

Hi I want to iterate the data of firebase and need to display it in table.

Below is my firebase structure.I want to display the bill to, email id and po number in the tables.i can see the data in console.log, but its not populating in tables.

EDI855

Bill To

-L9ac7clRzSVT-EfGxYv: "123456789"

-L9acDp2k34qDpubJFr6: "123456780"

Email Id

-L9ac7cxYSALI3Ogj-nt: "[email protected]"

-L9acDp87NO83OQutasK: "[email protected]"

Po Number

-L9ac7cvtNNzg7hYa355: "123456789"

-L9acDp4PPOSo9VL9ysB: "VV002"

Below is my html table:

div class="table-responsive">          
<table class="table">
  <thead>
    <tr>
    <th>No</th>
      <th>Bill To</th>
      <th>Requested by</th>
      <th>Po Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>>
      <td *ngFor="let x of items">{{x.$value}}</td>

    </tr>
  </tbody>
</table>

Below is my firebase code:

 constructor(public af: AngularFire) {
    af.database.list('/EDI855').subscribe(x =>{
      this.items=x;
      console.log(this.items)
    }

Answer 1

Try implementing your query in the init event instead

export class MyComponent implements OnInit {
items;

   constructor(public af: AngularFire) {
   }

   ngOnInit() {
      this.af.database.list('/EDI855').subscribe(x =>{
      this.items=x;
   }
}

Or even better, to get the most out of the real-time database, you should consider using the async pipe. When you do that, your app will react to any changes on your data and immediately refresh the UI.

<td *ngFor="let x of items | async">{{x.$value}}</td>

Just that in this case, remember that you're changing the type of items (it is no longer the list of items, but an observable of items), than therefore, no need to subscribe to it. The async pipe will do the work.

constructor(public af: AngularFire) {
    this.items = af.database.list('/EDI855');
}