对象在数组内发生变化，但在页面上保持不变

Question

我有一个 table 是由 ng-repeat 制作的。没有刷新的部分在下面；

<tbody class="defTbody" ng-repeat="activity in activityList track by activity.ActivityID">
     <tr class="{{activity.DetailExpanded == true ? 'shown' : ''}}">
         <td>
             <a ng-if="!activity.DetailExpanded" ng-click="activity.DetailExpanded = true"><i class="fa fa-fw fa-plus-circle txt-color-green fa-lg"></i></a>
             <a ng-if="activity.DetailExpanded" ng-click="activity.DetailExpanded = false"><i class="fa fa-fw fa-minus-circle txt-color-red fa-lg"></i></a>

         </td>
         <td style="font-size:smaller">
             <a ng-click="getActivityStatements(activity.ActivityID)" style="cursor: pointer;">
                 {{activity.PlanDateTime}} / {{activity.ActivityType_DisplayName}}
                 <br />
                 <small class="text-muted"><i>{{activity.ActivityID}}<i></i></i></small>
             </a>
         </td>
         <td style="font-size:smaller">
             {{activity.ParentActivityDisplayName}}
             <br />
             <small class="text-muted"><i>{{activity.ParentActivityID}}<i></i></i></small>
         </td>
         <td>{{activity.Customer_DisplayName}}</td>

         <td>{{activity.ActivityStatus_DisplayName}}</td>
         <td>
             {{activity.StatusReason}}
             <br />
             {{activity.StatusReasonNote}}
         </td>
     </tr>
</tbody>

$scope.activityList 很好，它已正确填充。这就是我在 activiyList

中更改项目的方式

$scope.UpdateActivityListItem = function (activityID, prevResponseDetail) {

        var url = "/api/activity/GetActivityResponse?activityID=" + activityID;

        $http({
            method: 'GET',
            url: url
        }).then(function successCallback(result) {
            var response = result.data;

            if (response.Status == "SUCCESS") {
                var activity = $scope.activityList.filter(activity => activity.ActivityID == activityID)[0];
                var renewedAct = response.Detail[0];
                activity = renewedAct;
                $scope.$apply();

                console.log("yenilenmiş aktivite:" +$scope.activityList)

                $('#modalActivityDetail').modal('hide');
                console.log(JSON.stringify($scope.activityList));
                $scope.addSpinnerClass(spinner);
            }
            else {
                console.log("fail");
            }
        },
        function errorCallback(result) {
            console.log("error");
        }
        );
    };

我在调试中确认项目 "updated" 很好，但在屏幕上它保持不变。

我认为这是 $scope.$apply() 可以解决的问题，但是添加它（如上面的代码片段所示）导致了这个问题

Error: error:inprog
Action Already In Progress

$digest already in progress

我还能做什么？

PS：这是用AngularJS 1.0

写的

Answer 1

在调用 $apply 之前请检查摘要周期是否繁忙。

if(!$scope.$$phase) {
  //$digest or $apply
}

------------编辑------ 一个新的、强大的方法已添加到任何 $scope：$evalAsync。基本上，如果发生回调，它将在当前摘要周期内执行回调，否则新的摘要周期将开始执行回调。试试这个：在这些情况下以及您拥有 !$scope.$$ 阶段的所有其他情况下，请务必使用 $scope.$evalAsync( callback ) 在回调中进行所有相关更改。

Answer 2

检查一下，您正在过滤 activityList 并更新过滤后的数组（结果）第一个元素不是 activityList 数组。

var renewedAct = response.Detail[0];
for (let index = 0; index < $scope.activityList.length; index++) {
    const activity = $scope.activityList[index];
    if (activity.ActivityID == activityID) {
        $scope.activityList[index] = renewedAct;
        break;
    }
}

Answer 3

即使不使用单行 splice 再次循环也可以做到这一点

这是代码，

  var activity = $scope.activityList.filter(activity => activity.ActivityID == activityID)[0];
  var index = $scope.activityList.indexOf(activity);
  var renewedAct = response.Detail[0];
  activity = renewedAct;

  $scope.activityList.splice(index, 1, activity)

注意：上面的行删除了那个地方的那个元素并添加了你的新元素。

对象在数组内发生变化，但在页面上保持不变

Object changes inside array but stays unchanged on page

angularjs

angularjs-scope

angularjs-ng-repeat