unable to display firebase data

Question

I wanted to display record for the user who is already logged in.Here i have created bill module in this module i wanted to show bill list of logged in user i have successfully fetch the record but at the time of display on my html it show me error 'this is null'

bill.ts

public items = [];    ref.orderByChild("bill_eml").equalTo(window.sessionStorage.getItem("Sessioneml")).once("value", function(snapshot) {
                  console.log(snapshot.key);
                  console.log(snapshot.val());

                 this.items.push(snapshot.val());
                  console.log('item'+JSON.stringify(this.items));
                });

bill.html

<ion-list *ngFor="let item of items">
<ion-item (click)="viewItem(item)">
  <!-- <button ion-item *ngFor="let item of items" (click)="viewItem(item)">
  {{ item.description1 }}
</button> -->
  <p>{{item.bill_period}} </p>
</ion-item>

Answer 1

Use arrow function .Arrow functions capture the this value of the enclosing context

Replace .once('value', function () { ... }) with following

public items = []; 
ref.orderByChild("bill_eml")
.equalTo(window.sessionStorage.getItem("Sessioneml"))
.once("value", (snapshot)=> {
        console.log(snapshot.key);
        console.log(snapshot.val());

        this.items.push(snapshot.val());
           console.log('item'+JSON.stringify(this.items));
      });

Update

Check out the updated answer

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

    <ion-content padding>
     <ion-list *ngFor="let item of objectKeys(items)">
    <ion-item>
    <b>{{ item }}</b>: {{ items[item].bill_eml }}

    </ion-item>
     </ion-list>
    </ion-content>



data=`
  [{
    "-L3glAc3XA9tnEIdjNtq": {
        "bill_due_date": "2018-01-25",
        "bill_eml": "[email protected]",
        "bill_flat": "345",
        "bill_id": "-L3glAc2ucb7Hfpnic23",
        "bill_name": "dfgh",
        "bill_period": "2018-02-01",
        "total": "4"
    },
    " -L40QW21pozAgTaYijh1": {
        "bill_due_date": "2018-01-29",
        "bill_eml": "[email protected]",
        "bill_flatno": "2",
        "bill_id": "-L40QW2-xMnuERXBLGxQ",
        "bill_name": "test",
        "bill_period": "2018-01-30",
        "total": "300"
    }
}]`
items;
objectKeys;
  constructor(
    public navCtrl: NavController) {
      this.objectKeys = Object.keys;
      this.items=JSON.parse(this.data)[0];
  }

}

Answer 2

Replace .once('value', function () { ... }) with .once('value', () => { ... }) (with arrow function). Function definition gets its own context to which this inside it refers. Arrow function will preserve the context.