Fatal编程技术网
  • javascript/
  • Javascript AngularJS:ng重复不'；更新数组后不刷新

Javascript AngularJS:ng重复不'；更新数组后不刷新

javascript angularjs ionic-framework

Javascript AngularJS:ng重复不'；更新数组后不刷新,javascript,angularjs,ionic-framework,angularjs-ng-repeat,Javascript,Angularjs,Ionic Framework,Angularjs Ng Repeat,我正在使用Ionic框架，并尝试使用以下HTML代码显示“Card”元素的列表： <div ng-repeat="case in cases"> <div class="list card"> <div class="item item-avatar"> <button ng-click="rmpost(card.key)" style="background: transparent; border: none;

我正在使用Ionic框架，并尝试使用以下HTML代码显示“Card”元素的列表：

<div ng-repeat="case in cases">

    <div class="list card">

      <div class="item item-avatar">
        <button ng-click="rmpost(card.key)" style="background: transparent; border: none;"><i class="icon ion-close-round"></i></button><!--if (dataSnapshot.val().volunteer_email == firebase.auth().currentUser.email)-->
        <h2>{{card.volunteer_name}} ({{card.volunteer_email}})</h2>
        <p>{{card.title}} ({{card.creationdate}})</p>
      </div>

      <div class="item item-body">
        <img class="full-image" src={{card.snapshot}}>
        <p>{{card.message}}</p>
      </div>

    </div>

      </div>
$scope.cases在初始化为常量值时显示良好，但在动态更新（通过$push）时，不会显示任何内容。

您需要包装
push
调用
$apply
方法。因为您是从角度范围之外（从firebase回调）添加到数组项中的

请尝试以下操作：

...
firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {
                $scope.$apply(function () {
                    $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});

                 });
             });
...
您需要包装您的
push
调用
$apply
方法。因为您是从角度范围之外（从firebase回调）添加到数组项中的

请尝试以下操作：

...
firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {
                $scope.$apply(function () {
                    $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});

                 });
             });
...
和马克比姆科的答案一样

我想补充一点，有一个更容易阅读的替代方案：

$scope.cases.push({key: dataSnapshot.key,
                                 volunteer_name: dataSnapshot.val().volunteer_name,
                                 volunteer_email: dataSnapshot.val().volunteer_email,
                                 title: dataSnapshot.val().title,
                                 creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                 snapshot: dataSnapshot.val().snapshot,
                                 message: dataSnapshot.val().message});

$scope.digest();
和马克比姆科的答案一样

我想补充一点，有一个更容易阅读的替代方案：

$scope.cases.push({key: dataSnapshot.key,
                                 volunteer_name: dataSnapshot.val().volunteer_name,
                                 volunteer_email: dataSnapshot.val().volunteer_email,
                                 title: dataSnapshot.val().title,
                                 creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                 snapshot: dataSnapshot.val().snapshot,
                                 message: dataSnapshot.val().message});

$scope.digest();
问题是您正在角度上下文之外更新模型。数据已经更改，但是angular没有运行它自己的内部摘要，也没有意识到模型中发生了任何更改

firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot) //FIREBASE EVENT NOT WITHIN ANGULAR CONTEXT
您需要使用angular的
$scope.$apply
方法

$rootScope.Scope#$apply

$apply（[exp]）$apply（）用于以角度执行表达式 从角度框架的外部。（例如，来自浏览器DOM） 事件、设置超时、XHR或第三方库）因为我们是 调用角度框架，我们需要执行适当的范围 异常处理、执行监视的生命周期。

下面介绍如何使用
$scope.$apply
进入有效的角度上下文，然后更新数据：

firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {
                $scope.$apply(function() {
                    //we are now within the angular context, so any updates to the model with be handled correctly
                    $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});
                });
});
从理论上讲，您可以手动调用
$scope.$digest
，但根据angular docs，这不是“推荐的”
$apply
正确转发异常，并允许处理观察者。通常使用此方法比单独处理
$digest
要好

$digest（）；处理当前作用域的所有观察者及其 儿童因为观察者的侦听器可以更改模型 $digest（）一直调用观察程序，直到没有更多的侦听程序 开火。这意味着有可能进入无限循环。 如果 迭代次数超过10次

通常，您不会直接在控制器或中调用$digest（） 指令。相反，您应该调用$apply（）（通常从 指令），这将强制执行$digest（）。

问题是您正在角度上下文之外更新模型。数据已经更改，但是angular没有运行它自己的内部摘要，也没有意识到模型中发生了任何更改

firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot) //FIREBASE EVENT NOT WITHIN ANGULAR CONTEXT
您需要使用angular的
$scope.$apply
方法

$rootScope.Scope#$apply

$apply（[exp]）$apply（）用于以角度执行表达式 从角度框架的外部。（例如，来自浏览器DOM） 事件、设置超时、XHR或第三方库）因为我们是 调用角度框架，我们需要执行适当的范围 异常处理、执行监视的生命周期。

下面介绍如何使用
$scope.$apply
进入有效的角度上下文，然后更新数据：

firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {
                $scope.$apply(function() {
                    //we are now within the angular context, so any updates to the model with be handled correctly
                    $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});
                });
});
从理论上讲，您可以手动调用
$scope.$digest
，但根据angular docs，这不是“推荐的”
$apply
正确转发异常，并允许处理观察者。通常使用此方法比单独处理
$digest
要好

$digest（）；处理当前作用域的所有观察者及其 儿童因为观察者的侦听器可以更改模型 $digest（）一直调用观察程序，直到没有更多的侦听程序 开火。这意味着有可能进入无限循环。 如果 迭代次数超过10次

通常，您不会直接在控制器或中调用$digest（） 指令。相反，您应该调用$apply（）（通常从 指令），这将强制执行$digest（）。

看起来您的代码缺少一些重要的细节。如何获得
dataSnapshot
变量？尝试使用
$watch
并在更改时刷新。@JLRishe我更新了代码。请帮我个忙。@Fangs你能给我举个例子吗？你要把新的对象数组推到哪里？我做了一个简单的超时示例。看起来您的代码缺少一些重要的细节。如何获得
dataSnapshot
变量？尝试使用
$watch
并在更改时刷新。@JLRishe我更新了代码。请帮我个忙。@Fangs你能给我举个例子吗？你要把新的对象数组推到哪里？我做了一个简单的超时示例。尝试之后：我得到的是显示的空白数据，而不是dataSnapshot.val（）中的数据。*@user6039980应该正常工作-控制台中有错误吗？抱歉，但您的答案是完美的。我忘了将{{card.*}}重命名为{{case.*}}，这就是问题的原因。非常感谢，这很有帮助。我只想补充一点，ng click按钮不起作用。@user6039980很高兴能提供帮助！不幸的是，您的问题中没有足够的信息来解决ng click问题。我建议您为此问题打开一个附加问题，并提供附加详细信息。尝试之后：我将显示空白数据，而不是dataSnapshot.val（）中的数据。*user6039980应该可以工作-控制台中有任何错误吗？抱歉，但您的答案是完美的。我念