代码之家 › 专栏 › 技术社区 › Ege Bayrak

对象在数组中更改,但在页面上保持不变

angularjs-ng-repeat angularjs-scope angularjs

Ege Bayrak · 技术社区 · 6 年前

我有一张桌子,是由 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 很好,它可以正确填充。这是我在ActivityList中更改项目的方式

$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");
        }
        );
    };

我在调试中确认该项得到了很好的“更新”,但在屏幕上它保持不变。

我认为这是一个范围内的问题$apply()可以解决此问题,但添加它(如上面的代码段所示)会导致此问题

Error: error:inprog
Action Already In Progress

$digest already in progress

我还能做什么?

PS:这是用Angular JS 1.0编写的

3 回复 | 直到 6 年前

Rahul Sharma 6 年前

选中此选项,您正在筛选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;
    }
}

Sravan 6 年前

即使没有再次循环,也可以使用 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)

注: 上行删除该位置的元素并添加新元素。

Neha Tawar 6 年前

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

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

---------编辑------ 任何$scope都添加了一个新的、强大的方法:$evalAsync。基本上,如果发生回调,它将在当前摘要周期内执行回调,否则新的摘要周期将开始执行回调。尝试以下操作: 在这些情况下,以及所有其他情况下,你有一个$范围$$阶段,确保使用 $scope.$evalAsync( callback ) 在回调中执行所有相关更改。