NativeScript Angular 2 Firebase列表无效

时间:2016-10-11 17:29:11

标签: listview angular firebase firebase-realtime-database nativescript

尝试使用我的firebase数据库的内容获取最新的列表。

不知怎的,它不起作用,我正在使用eddy verbruggen的firebase插件。该插件正在运行,但我无法将其显示在列表中。

home.component.ts

import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
import firebase = require("nativescript-plugin-firebase");

@Component({
  selector: "home",
  templateUrl: "pages/home/home.component.html"
})
export class HomeComponent implements OnInit {

  meting: Array<Object> = [];

  ngOnInit() {
    this.fbGetData();
  }

  public onItemTap(args) {
        console.log("------------------------ ItemTapped: " + args.index);
    }

  fbGetData(){
  var onChildEvent = (result) => {
   console.log("Value: " + JSON.stringify(result.value));  // <-- works
    this.meting.unshift(result.value);
  };  
  // listen to changes in the /users path
  firebase.addChildEventListener(onChildEvent, "/user0").then(
    (listenerWrapper) => {
      var path = listenerWrapper.path;
      var listeners = listenerWrapper.listeners; // an Array of listeners added
      // you can store the wrapper somewhere to later call 'removeEventListeners'
  }
  );
  }  
}

home.component.html

    <ListView [items]="meting" (itemTap)="onItemTap($event)">
    <template let-item="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout [class.odd]="odd" [class.even]="even">
            <Label [text]='"Week: " + i'></Label>
            <Label [text]='"Gewicht: " + item.gewicht + ", Middel: " + item.middel + ", Heup: " + item.heup'></Label>
        </StackLayout>
    </template>
</ListView>

firebase数据库:

user0
    week0
        gewicht: 86
        heup: 78
        middel: 78
    week1
        gewicht: 85
        heup: 76
        middel: 74

1 个答案:

答案 0 :(得分:0)

当我在自己的程序中使用fbGetData()函数时,它可以工作。我不确定你对firebase有多新,但我要检查的第一件事是在数据库下的firebase控制台中有一个规则选项卡。在这里,您必须输入读写规则。您可以找到文档at this firebase link。这些规则有一个层次结构。所以理解它们很重要。这可能很容易阻止您的代码。

测试方法是将规则设置为以下内容:

{
  "rules": {
    "user0": {
      ".read": true,
      ".write": true
    }
  }
}

这将为您的&#34; user0&#34;提供读写访问权限。节点。您不希望在开发中使用此代码,而任何人都可以读取或写入您的数据。

用于访问根节点只需将读写规则添加到根节点,如下所示。

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

如果不是因为这个原因让我知道。