【问题标题】:Mapping firebase data in ionic list在离子列表中映射 Firebase 数据
【发布时间】:2017-06-12 02:51:14
【问题描述】:

我正在使用 update() 将我的数据存储在 firebase 中

    var newKey = firebase.database().ref().push().key;

    var updates = {};
    updates['metadata/' + newKey] = {
        name: $scope.formData.name,
        price: $scope.formData.price
    };

    updates['realdata/' + newKey] = {
        name: $scope.formData.name,
        price: $scope.formData.price,
        date: $scope.formData.date
    };

    return firebase.database().ref().update(updates)
    .then(function(ref){
        console.log("added in fb");
    }, function(error){
        console.log("error " + error)
    });

现在在另一个页面上,我正在从 firebase 中提取数据,但我似乎无法将其映射到我的视图中的列表。

我尝试了多种方法来提取数据,并且两种方法都可以在将数据记录到控制台时看到。

    var dbRef = firebase.database().ref('/metadata');
    //Method 1
    $scope.list = $firebaseArray(dbRef);
   /*
     Result here in the console is an array with objects
     but when setting this in my list, I get the same amount of items pulled out but they are empty
   */ 

    //Method 2 - I prefer this way as per docs it's a best practice
     var loadmetadata = function(data){
         console.log(data.val().name); // I get the actual name
         $scope.list = data.val().name
     };

     dbRef.on('child_added', loadmetadata);
     dbRef.on('child_changed', loadmetadata);

我的观点很简单

<ion-item ng-repeat="listitem in list">
{{ listItem.name }}
</ion-item>

我错过了什么?我更喜欢第二种方法,如果有人可以帮助我实现这一点?

问题是我在 SO 上找到了有同样问题的人,他能够用我上面的方法解决它。这是问题/答案Firebase 3 get list which contain generated keys to ionic list

的链接

我看到的唯一区别是他正在对结果进行排序,但我目前不需要。

【问题讨论】:

    标签: angularjs firebase ionic-framework firebase-realtime-database ng-repeat


    【解决方案1】:

    我刚刚想通了!我需要使用 $firebseObject 方法,而不是使用 $firebaseArray。

    $scope.metadataObj = $firebaseObject(dbRef);
    

    在我看来,我可以做到以下几点:

    <ion-item  ng-repeat="(key, value) in metadataObj">{{value.name}}</ion-item>
    

    这个方法也包含所有的子方法。所以没有必要单独听他们的。

    【讨论】:

      猜你喜欢
      • 2010-10-27
      • 1970-01-01
      • 2021-11-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-02
      • 2015-10-18
      • 2020-03-26
      相关资源
      最近更新 更多