无法显示 Firebase 数据答案

【问题标题】：unable to display firebase data无法显示 Firebase 数据
【发布时间】：2018-02-02 21:25:01
【问题描述】：

我想为已经登录的用户显示记录。在这里我在这个模块中创建了账单模块我想显示登录用户的账单列表我已经成功获取记录但在我的显示时html 它显示错误“这是空的”

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>

【问题讨论】：

这里什么是空？
“this”指针为空

标签： angular firebase-realtime-database ionic3

【解决方案1】：

使用箭头函数。箭头函数捕获封闭上下文的this 值

将.once('value', function () { ... })替换为关注

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

更新

查看更新的答案

<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": "demo@niyanta.co.in",
        "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": "demo@niyanta.co.in",
        "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];
  }

}

【讨论】：

_v.context.$implicit 为空？
你在用离子吗？
但它在查看页面上只显示了一条记录，而我有不止一条记录该怎么办？
在我的控制台中，我检索了我想要显示的记录。但是当我将该对象绑定到 html 时，它只显示单个记录
分享你的 json 回复

【解决方案2】：

将.once('value', function () { ... }) 替换为.once('value', () => { ... })（带箭头功能）。函数定义有它自己的上下文，它里面的this 引用。箭头函数将保留上下文。

【讨论】：