Firebase阵列获取不会加载到页面加载上 [英] Firebase Array Fetches Not Loading on Page Load

问题描述

  // Movements Controller 
 app.controller（MovementsCtrl，[$ scope，$ rootScope，$ filter，$ timeout， （$ scope，$ rootScope，$ filter，$ timeout，$ route）{
 $ rootScope.pageName =Movements; 
 
 var date = new Date（） ; 
 var currentDate = $ filter（'date'）（new Date（），'MM / dd / yyyy'）; 
 
 $ scope.labels = []; 
 $ scopedata = []; 
 $ scope.recordsArray = []; //将记录对象转换为数组
 console.log（$ scope.recordsArray）; 
 
）firebase.auth（）。onAuthStateChanged（function（user）{
 if（user）{
 $ rootScope.userID = user.uid; 
 
 //运行查询拉用户记录
 $ timeout（function（）{
 var userID = $ rootScope.userID; 
 var query = firebase.database（）。ref（'/ users /'+ userID +' /movements/').orderByChild('created'）; 
 
 query.on（value，function（snapshot）{
 $ scope.records = snapshot.val ）; 
 
 angular.forEach（$ scope.records，function（element）{
 $ scope.recordsArray.push（element）; 
 $ scope.labels.push（element.name）; 
 $ scope.data.push（element.weight）; 
}）; 
}）; 
}）; 
} else {
 console.log（not signed in）; 
} 
}）; 
 
 $ scope.addRecord = function（）{
 console.log（Pushed）; 
 var recordID = database.ref（）。push（）。key; 
 var userID = $ rootScope.userID; 
 
 database.ref（'users /'+ userID +'/ movements /'+ recordID）.set（{
 user：userID，
 name：Front Squat， 
 sets：5，
 reps：5，
 weight：350，
 created：currentDate 
}）; 
 $ route.reload（）; 
} 
}]）; 
  

由于某种原因，我的页面在我的JS加载数组之前加载，呈现一个空白页面。我试过在init（）函数中包装所有东西并加载，但仍然是同样的问题。任何人都可以帮我弄清楚如何预先加载我的JS数组或事前有另一种解决方案吗？
$ b $谢谢。

作为参数提供的函数Firebase API保存Firebase方法，直到数据从服务器到达。这些函数是异步执行的。这意味着它们是在封闭函数完成之后执行的。

在AngularJS框架之外异步发生的范围变化及其摘要周期不会触发更改为DOM。将事件引入AngularJS框架的一种方法是将ES6承诺转换为$ q服务承诺：

$ $ $ $ $ $ $ firebase.auth（） .onAuthStateChanged（函数（用户）{
如果（用户）{
$ rootScope.userID = user.uid;

//运行查询来拉取用户记录
// $ timeout（function（）{
var userID = $ rootScope.userID;
var query = firebase.database（）。ref（'/ users /'+ userID +'/ movements /' ）.orderByChild（'created'）;

// USE $ q.when
$ q.when（query.once（value））。then（function（value）{
$ scope.records = value;

angular.forEach（$ scope.records，function（element）{
$ scope.recordsArray.push（element）;
$ scope.labels.push（element.name）;
$ scope.data.push（element.weight）;
}）;
}）;
//} ）;
} else {
console.log（not sign ed in）;
}
}）;

使用$ q服务承诺，这些承诺与AngularJS框架及其摘要周期正确集成。

$ q.when

包装可能是价值的物品或一个（第三方）可以承诺成 $ q 诺言。当你处理一个可能或可能不是承诺的对象，或者承诺来自不可信任的来源时，这是非常有用的。

a href =https://docs.angularjs.org/api/ng/service/$q#when =nofollow noreferrer> - AngularJS $ q服务API参考 - $ q.when

// Movements Controller
app.controller("MovementsCtrl", ["$scope", "$rootScope", "$filter", "$timeout", "$route", function($scope, $rootScope, $filter, $timeout, $route) {
  $rootScope.pageName = "Movements";

  var date = new Date();
  var currentDate = $filter('date')(new Date(), 'MM/dd/yyyy');

  $scope.labels = [];
  $scope.data = [];
  $scope.recordsArray = []; // Converts records object into an array.
  console.log($scope.recordsArray);

  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      $rootScope.userID = user.uid;

      // Run query to pull user records.
      $timeout(function() {
        var userID = $rootScope.userID;
        var query = firebase.database().ref('/users/' + userID +'/movements/').orderByChild('created');

        query.on("value", function(snapshot) {
            $scope.records = snapshot.val();

              angular.forEach($scope.records, function(element) {
                $scope.recordsArray.push(element);
                $scope.labels.push(element.name);
                $scope.data.push(element.weight);
              });
        });
      });
    } else {
      console.log("not signed in");
    }
  });

  $scope.addRecord = function() {
    console.log("Pushed");
    var recordID = database.ref().push().key;
    var userID = $rootScope.userID;

    database.ref('users/' + userID + '/movements/' + recordID).set({
      user: userID,
      name: "Front Squat",
      sets: 5,
      reps: 5,
      weight: 350,
      created: currentDate
    });
    $route.reload();
  }
}]);

For some reason my page loads before the arrays in my JS load, rendering an empty page. I've tried wrapping everything in an init() function and loading that, but still the same issue. Can anyone help me figure out how to pre-load my JS arrays beforehand or is there another solution?

Thanks.

解决方案

some reason my page loads before the arrays

The functions provided as arguments to the Firebase methods are held by the Firebase API until data arrives from the server. Those functions are executed asynchronously. This means they are executed after the enclosing functions complete.

Changes to scope that occur asynchronously outside the AngularJS framework and its digest cycle will not trigger changes to the DOM. One technique to bring events into the AngularJS framework is to convert the ES6 promises to $q service promises:

  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      $rootScope.userID = user.uid;

      // Run query to pull user records.
      //$timeout(function() {
        var userID = $rootScope.userID;
        var query = firebase.database().ref('/users/' + userID +'/movements/').orderByChild('created');

        //USE $q.when 
        $q.when(query.once("value")).then(function(value) {
            $scope.records = value;

              angular.forEach($scope.records, function(element) {
                $scope.recordsArray.push(element);
                $scope.labels.push(element.name);
                $scope.data.push(element.weight);
              });
        });
      //});
    } else {
      console.log("not signed in");
    }
  });

Use $q Service promises that are properly integrated with the AngularJS framework and its digest cycle.

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

-- AngularJS $q Service API Reference - $q.when

这篇关于Firebase阵列获取不会加载到页面加载上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！