• 1
Votes
name
name Punditsdkoslkdosdkoskdo

NativeScript Angular 2 Firebase list is not working

Trying to get a list up to date with the content of my firebase database.

Somehow it does not work, i'm using the firebase plugin from eddy verbruggen. The plugin is working but i can't get it displayed on the list.

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 database:

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

When I use your fbGetData() function in my own program it works. I'm not sure how new you are to firebase, but the first thing I would check is in the firebase console under database there is a rules tab. Here you have to enter read and write rules. You can find documentation at this firebase link. there is a hierarchy for these rules. So it is important to understand them. This could easily be what is blocking your code.

a way to test it is to set your rules to the following:

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

This will give read and write access to your "user0" node. You do not want to use this code in development whereas anyone could read or write over your data.

for accessing the root node simply add your read and write rules to the root node like this.

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

If not for this reason let me know.

  • 0
Reply Report