Question

我想显示已经登录的用户的记录。我已经在此模块中创建了帐单模块我想显示已登录用户的帐单列表我已成功获取记录但是在我显示时它显示错误'这是空'

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

使用箭头功能。箭头函数捕获封闭上下文的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];
  }

}

Answer 2

将.once('value', function () { ... })替换为.once('value', () => { ... })（带箭头功能）。函数定义获取其内部this所引用的上下文。箭头功能将保留上下文。

无法显示firebase数据

2 个答案: