从Firebase中检索数据到Polymer元素 [英] Retrieve data from Firebase to Polymer element

问题描述

以下是我的代码：

pre> < dom-module id =bb-account-settings>

< template>

< style is =custom-styleinclude =shared-styles>< / style>

< div class =settings-dialog>
< div class =frame>
< div class =horizo​​ntal layout>
< div>
< div class =user-image>< / div>
< / div>
< div class =horizo​​ntal layout>
& nbsp& nbsp& nbsp& nbsp& nbsp
< paper-input label =Last Namevalue ={{lNameSet}}>< / paper-input>
< / div>
< / div>
< / div>
< / div>

< / template>
< script> （

是：'bb-account-settings'，

属性：{
fNameSet：{
类型：String，
value：function（）{
var userId = firebase.auth（）。currentUser.uid;
firebase.database（）。ref（'/ user /'+ （'snapshot'）。（函数（快照）{
console.log（snapshot.val（）。fName）
return（snapshot.val（）。 fName）;
}）;
}
}，
lNameSet：{
type：String，
value：'test last name'
}
}
}

}）;

< / script>


lNameSEst是'test last name'，显然是放在输入字段中。你很希望fNameSet是一样的东西，但不是。当我打印它（console.log）它说'测试名字'，但它不显示在其输入字段！

我很困惑。正如其中一位评论者注意到的，在回调中返回值是问题所在。传递给firebase的一次函数的函数被异步调用&在一个不同的范围，所以基本上它失去了它与你声明的地方的关系&你要返回的值不会在你想要的地方。

有点蛮力的方法可以得到你想要的东西，就像下面这样：

  ready：function（）{
 var userId = firebase.auth（）。currentUser.uid; 
 firebase.database（）。ref（'/ user /'+ userId +'/UserInfo').once('value').then(function(snapshot）{
 console.log（snapshot。 val（）.fName）
 this.fNameSet = snapshot.val（）。fName; 
} .bind（this））; 
 
 $ / code> 

有更多优雅的方法，但是这个问题不在这个范围之内&安培;需要一些重新构造和深入了解您的应用程序结构。

I'm having trouble getting data from firebase to an polymer element.

Here is my code:

 <dom-module id="bb-account-settings">

  <template>

    <style is="custom-style" include="shared-styles"></style>

                <div class="settings-dialog">
                    <div class="frame">
                        <div class="horizontal layout">
                            <div>
                                <div class="user-image"></div>
                            </div>
                            <div class="horizontal layout">
                                <paper-input label="First Name" value="{{fNameSet}}"></paper-input>
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                <paper-input label="Last Name" value="{{lNameSet}}"></paper-input>
                            </div>
                            <paper-input label="Email" value="{{emailSet}}"></paper-input>
                        </div>
                        <paper-input label="Phone number" value="{{phoneSet}}" allowed-pattern="[0-9]"></paper-input>
                    </div>
                </div>

  </template>
  <script>

    Polymer({

      is: 'bb-account-settings',

            properties: {
                fNameSet: {
                    type: String,
                    value: function() {
                        var userId = firebase.auth().currentUser.uid;
                        firebase.database().ref('/user/' + userId + '/UserInfo').once('value').then(function(snapshot) {
                            console.log(snapshot.val().fName)
                            return (snapshot.val().fName);
                        });
                    }
                },
                lNameSet: {
                    type: String,
                    value: 'test last name'
                    }
                }
            }

    });

  </script>

lNameSEst is 'test last name' and obviously its put in its input filed. You well expect fNameSet to to the same thing, but no. when I print it (console.log) it says 'test first name' but it doesn't show in its input filed!

I'm so confused.

解决方案

As one of the commenters noticed, returning a value in a callback is the problem. Your function passed to firebase's "once" function is called asynchronously & in a different scope so basically it loses it's relationship with where you declared it & the value you're returning isn't going to where you're expecting.

A somewhat brute force way to get what you want is to do something like the following:

ready: function() {
    var userId = firebase.auth().currentUser.uid;
    firebase.database().ref('/user/' + userId + '/UserInfo').once('value').then(function(snapshot) {
          console.log(snapshot.val().fName)
          this.fNameSet = snapshot.val().fName;
        }.bind(this));
}

There are more elegant approaches but it is sort of out of scope of this question & requires some re-structuring & deeper insight into your app's structure.

这篇关于从Firebase中检索数据到Polymer元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！