Polymerfire firebase-query not working and no erro

2019-09-16 09:07发布

问题:

I want to fetch data from Firebase using polymerfire and somehow it doesn't work.

Firebase data

lol-project (a name with 5 randomized letters)
+- events
    +- (some random event id, which is auto-generated)
        +- name: "haha"
        +- desc: "hihi"
    +- (some random event id, which is auto-generated)
        +- name: "huhu"
        +- desc: "hehe"

Code (Polymer v1.6, Polymerfire v0.10.2)

<link rel="import" href="../../../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../../bower_components/polymerfire/firebase-query.html">
...
<firebase-auth user="{{user}}"></firebase-auth>

<firebase-query id="eventquery" path="/events" data="{{events}}"></firebase-query>

<div class="Page-container" id="section1">
    <template is="dom-repeat" items="[[events]]" as="item">
        <p>[[item.name]]</p>
    </template>
</div>
...
properties: {
    events: {
        type: Object,
        observer: '_eventsChanged'
    }
},

_eventsChanged: function(newData, oldData) {
    console.log("it changed?!");
    console.info(newData);
}

Firebase rules

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

No error, no data. The console.info(newData); gives empty array. After hours of googling, I stumbled upon similar case, which apparently left unanswered in here (yes, this problem is pretty much similar to that one).

Anyone knows what I'm missing? Please help.

回答1:

Few Things:

  1. events is an Array. See firebase-query: "If the child nodes of the query are objects (most cases), data will be an array of those objects with an extra $key field added to represent the key."
  2. No need to import polymerfire.html
  3. Are you sure you are logged in? You can propagate signed-in property in firebase-auth <firebase-auth user="{{user}}" signed-in="{{signedIn}}"></firebase-auth> and place User signedIn is {{signedIn}} just above your <div>.

You could also temporarily change your database security rules.