Angular JS firebase。（child_added）未在页面上呈现

一尘不染

Angular JS firebase。（child_added）未在页面上呈现

angularjs

我的Firebase数据库中有一些条目，这些条目正试图显示在html页面上。console.log显示数据库中的子级，但未显示在页面上。这是我的代码：

D B：

quiz-show  
    user
        -JuYaVjjm0zY59vK48aR: "user1"
        -JuYaXzrT2-_pfhpr58o: "user2"
        -JuYaZd_oS-hi5zqYLhX: "user3"
        -JuYaaNNd24Icruv18LH: "user4"

控制器：

'use strict';

angular.module('phoneQuizAnswer')
    .controller('testCtrl', function ($scope, $firebaseObject) {
        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        fireRef.on('child_added', function(childSnapshot, prevChildKey) {
            console.log(childSnapshot.val());
            $scope.users = childSnapshot.val();
        });
    });

HTML：

{{h1}}
{{users}}

console.log显示

user1
user2
user3
....

{{h1}}正确渲染，但{{users}}不渲染任何东西。那么如何让每个人都显示在页面上？

阅读 212

2020-07-04

共1个答案

一尘不染

Firebase异步加载和监视数据。只要有（新的或更新的）数据，就会触发您的回调函数。不幸的是，那时AngularJS通常不准备接受更改。这就是Firebase创建AngularFire的原因，当发生更改时，它会自动通知AngularJS。

您似乎部分使用了AngularFire，但没有使用此构造。我建议_始终_将AngularFire用于需要绑定到的数据，$scope _或者永远不要_使用AngularFire。选择是您的，但要保持一致。

使用AngularFire：

        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        $scope.users = $firebaseArray(fireRef);

不使用AngularFire：

        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        fireRef.on('value', function(childSnapshot, prevChildKey) {
          $timeout(function() {
            console.log(childSnapshot.val());
            $scope.users = childSnapshot.val();
          };
        });

该$timeout结构告诉AngularFire您正在修改$scope。

请注意，我们拥有的每一份AngularFire文档中都涉及到将数组绑定到作用域：AngularFire快速入门，AngularFire指南和AngularFire
API文档。请阅读它们，它们包含许多其他有用的位。

2020-07-04