应用程序移至 Firebase 时未加载数据

Question

我有一个应用程序，其中有一些用于过滤数据的下拉菜单。一旦我将 json 移动到 firebase，我就无法在这些下拉列表中检索数据。 app

下面是控制台错误：

TypeError: Cannot read property 'tags' of undefined
at classifieds.ctr.js:135
at Object.forEach (angular.js:321)
at getTags (classifieds.ctr.js:134)
at classifieds.ctr.js:20
at processQueue (angular.js:15552)
at angular.js:15568
at Scope.$eval (angular.js:16820)
at Scope.$digest (angular.js:16636)
at angular.js:16859
at completeOutstandingRequest (angular.js:5804)

下面是代码：

angular
.module("ngClassifieds") 
.controller("classifiedsCtrl", function($scope, $state, $http, classifiedsFactory, $mdSidenav, $mdToast, $mdDialog) { 


    $scope.classifieds = classifiedsFactory.ref;
    $scope.classifieds.$loaded().then(function(classifieds) {
        $scope.tags = getTags(classifieds); // call the getTags method below
        $scope.books = getBooks(classifieds); // call the getBooks method below
        $scope.authors = getAuthors(classifieds); // call the getAuthors method below
        $scope.order = ""; //for sorting in asc or desc order
    });

下面是getTags方法：

function getTags(classifieds) {

        var tags = [];
        angular.forEach(classifieds, function(item) {
            angular.forEach(item.meta.tags, function(tag) {

                tags.push(tag);
            });

        });

        return _.uniq(tags);

    }

foll 是 firefox 中的错误： return 语句后无法访问的代码

Error: item.meta is undefined
getTags/<@http://localhost:8080/components/classifieds/classifieds.ctr.js:135:5
forEach@http://localhost:8080/node_modules/angular/angular.js:321:11
getTags@http://localhost:8080/components/classifieds/classifieds.ctr.js:134:4
@http://localhost:8080/components/classifieds/classifieds.ctr.js:20:18
processQueue@http://localhost:8080/node_modules/angular/angular.js:15552:28
scheduleProcessQueue/<@http://localhost:8080/node_modules/angular/angular.js:15568:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:8080/node_modules/angular/angular.js:16820:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:8080/node_modules/angular/angular.js:16636:15
$RootScopeProvider/this.$get</Scope.prototype.$evalAsync/<@http://localhost:8080/node_modules/angular/angular.js:16859:15
completeOutstandingRequest@http://localhost:8080/node_modules/angular/angular.js:5804:7
Browser/self.defer/timeoutId<@http://localhost:8080/node_modules/angular/angular.js:6081:7

如果你能帮我弄清楚我在哪里出错了，我真的很感激。谢谢

Answer 1

AngularFire $loaded() 事件适用于一组非常有限的特定用例，在这些用例中，您希望以不同于其他数据的方式处理初始加载的数据。这不是这里的情况，所以你不应该使用$loaded()。

如果您希望在视图中显示您的数据库中的标签列表，您应该将该标签列表放入$firebaseArray()：

var tagsRef = ref.child('tags');
$scope.tags = $firebaseArray(tagsRef);

这将加载标签并在加载后自动更新视图。更好的是，它还会监控数据库的变化，并在数据发生变化时更新视图。

对$scope.books 和$scope.authors 执行相同的操作，您会更轻松。设置三个$firebaseArray() 对象而不是单个$firebaseObject() 可能感觉违反直觉。但无论哪种方式，成本都差不多。