Question

无法显示 Firebase 数据

2018-01-31

266

angular firebase-realtime-database ionic3

我想显示已登录用户的记录。我在此模块中创建了账单模块，我想显示已登录用户的账单列表，我已成功获取记录，但在 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>

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": "[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

将 .once('value', function () { ... }) 替换为 .once('value', () => { ... }) （使用箭头函数）。函数定义获得其自己的上下文，其中的 this 引用该上下文。箭头函数将保留上下文。