异步 XMLHttpRequest 响应后，ng-grid 未绑定最新数据答案

【问题标题】：ng-grid not binding with latest data after async XMLHttpRequest's response异步 XMLHttpRequest 响应后，ng-grid 未绑定最新数据
【发布时间】：2020-09-23 18:37:39
【问题描述】：

我有一个 AngularJS Web 应用程序，我正在尝试将文件上传到服务器，上传完成后，我必须使用最后上传文件的条目更新 ng-grid。以下是我的网格html，

<div class="gridholder" data-ng-grid="viewmodel.gridOptions">                
            </div>

以下是我的控制器逻辑。

vm.gridOptions = {
            data: 'gridData',            
            enableColumnResize: true,            
            enablePaging: true,
            columnDefs: [
                { field: 'FileName', displayName: 'File Name', width: 250 }
                { field: 'UploadedDate', displayName: 'Uploaded Date'}
            ],
            multiSelect: false,
            enableSorting: true,
            showFooter: true,
        };

要求是我显示文件上传的进度和整个应用程序在上传过程中做出响应，我已经实现了这一点，但我的 ng-grid 在特定情况下没有更新。

如果我在文件上传和响应到来之前保持在同一页面中，则网格正在刷新，但是当我移动到应用程序的另一个页面并返回文件上传页面时，响应来了，我的网格未刷新。

这是我的文件上传js代码，

var data = new FormData();
data.append('file', file);
var xhrRequest = Factory.uploadFileRequest('UploadFile');
xhrRequest.upload.addEventListener("progress", progressHandler, false);                

xhrRequest.onreadystatechange = function (e) {
};

xhrRequest.onload = function (e) {
    if (JSON.parse(e.currentTarget.responseText).Success == true) {
        $timeout(function () {
            $scope.LoadGrid();
            //showing success message here
        }, 2000);
    }
    else
    {
        //showing error message here                    
    }

};
xhrRequest.onerror = function (e) {                    
   //showing error message here                 
};
xhrRequest.send(data);

$scope.LoadGrid = function () {            
    Factory.callGet("Files").then(function (d) {

            $scope.gridData = d.data;
        }               
        $scope.totalItems = $scope.gridData.length;
    }, function error(err) {
        //Error Message
    });
}

gridData 是我的 data-ng-grid 值。我已经在$timeout 中调用了我的LoadGrid 方法，但网格仍然没有用最新数据刷新。任何帮助将不胜感激。

【问题讨论】：

你在日志中看到$scope.LoadGrid();在失败场景中被调用了吗？
我已经删除了失败时发生的情况，因为它与我的问题无关。当我的请求成功时，我正面临这个问题。
1) 在某些服务或控制器中，您在哪里调用upload 文件。 2) I move to another page of my application - 我知道你有一些路线，你改变了 URL a.e.控制器
我的页面中有一个按钮，用于调用上传功能。是的，当我说我移动到应用程序中的另一个页面时，会发生路由更改并加载新页面的控制器。
上传功能在我的控制器里。

标签： javascript angularjs ajax xmlhttprequest

【解决方案1】：

可能的问题

您在控制器内部实现了上传逻辑。当您切换到另一个视图时，angularjs 会破坏您的控制器，因此没有人会监听文件上传响应。

可能的解决方案：

1) 使用service（或Factory）类型的单例来管理那里的上传过程。
比如MyService.upload(data).then(function (response) {/**/});

2) 默认情况下MyService.upload(data)会定期返回一个promise，但也会将结果存储在Service内部，例如upload_results：

app.service('MyService',['$q',function ($q) {

    var self = this;

    var upload_results = [];

    self.upload = function (_data) {
        return // <YOUR_PROMISE> 
          .then(function (response) {

              upload_results.push({
                    id: new Date().getTime(), 
                    data: response.data
               })              
            }
            , function (error) {
              console.error(error);
              return $q.reject(error);
            });
      };

    self.getResults() = function(){
      return upload_results;
    }

    self.resetResults() = function(){
      upload_results = [];
    }
}

当您在启动时初始化控制器或返回到前一个控制器时，您会询问服务是否有适合您的东西：

   var results = MyService.getResults();

   if(results.length > 0){
    $scope.gridData = results[0].data; // or use timestamp to manage it
    MyService.resetResults();
   }

希望能给你一些启示，

【讨论】：