Angular Service传入对象未更新：删除数据后NgTable不刷新求助

我来帮你分析一下这个问题，其实核心原因是你的NgTableDataService在初始化NgTableParams时，闭包捕获了当时传入的tableData数组引用——如果后续你只是用splice修改原数组，理论上引用是同一个，应该能拿到最新数据，但可能NgTable的内部机制或代码逻辑导致它没有正确感知到数组内容的变化；而如果之后你重新赋值了$scope.alertsensorconfigs（比如从后台拉取新数组），那service里的闭包引用就完全是旧数组了。

下面是具体的解决方法，能确保每次表格加载都拿到最新的数据：

1. 修改NgTableDataService，改用函数获取最新数据 #

把service的getGenericTableParams方法改成接收一个获取数据的函数，而不是直接接收数组。这样每次NgTable需要数据时，都会调用这个函数拿到最新的数组：

angular.module('control-room').service('NgTableDataService', function ($filter, NgTableParams, Session) {
    var session = Session.get();
    this.getGenericTableParams = function(getTableData, funcFilter, searchTableFilter){
        return new NgTableParams({
            count: session.user.tablePagination,
            filter: searchTableFilter
        }, {
            counts: rowsPerPageTemplate,
            getData: function (params) {
                // 每次获取数据时，调用函数拿到最新的数组
                var tableData = getTableData();
                
                if (params.filter() == ''){
                    var pfilter = '';
                }else{
                    var pfilter = params.filter().filter.toUpperCase();
                }
                let filteredData = params.filter() ? $filter('filter')(tableData, funcFilter(pfilter)) : tableData;
                
                if (!!filteredData && filteredData.length >= 0) {
                    params.total(filteredData.length);
                    var rowsPerPageTemplateWithAllData = rowsPerPageTemplate.slice();
                    var isFound = rowsPerPageTemplateWithAllData.some(function (element) {
                        return element === filteredData.length;
                    });
                    params.settings().counts = rowsPerPageTemplateWithAllData.filter(item=>item<filteredData.length)
                    if (filteredData.length >= 5){
                        params.settings().counts.push(filteredData.length);
                    }
                    rowsPerPageTemplateWithAllData.push(filteredData.length + (isFound ? 1 : 0));
                    if (session.user.tablePagination >= params.settings().counts[params.settings().counts.length-1]){
                        params.settings().count = params.settings().counts[params.settings().counts.length-1];
                    }else{
                        params.settings().count = session.user.tablePagination;
                    }
                    if (params.total() <= params.count()) {
                        params.page(1);
                    }
                    var x = $filter('orderBy')(filteredData, params.orderBy());
                    var y = x.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    return y;
                } else {
                    params.settings().counts = [];
                    return null;
                }
            }
        });
    };
});

2. 页面代码传入数据获取函数 #

在页面中，不再直接传入$scope.alertsensorconfigs数组，而是传入一个返回该数组的函数：

$scope.tableParams = NgTableDataService.getGenericTableParams(
    () => $scope.alertsensorconfigs, // 用函数返回最新数组
    $scope.funcFilter, 
    $scope.searchTable.filter
)

这样修改后，每次NgTable调用getData刷新数据时，都会通过这个函数拿到最新的$scope.alertsensorconfigs，不管你是用splice修改原数组，还是直接重新赋值新数组，service都能获取到最新的数据，完美解决删除后表格不更新的问题。

你的删除逻辑本身是没问题的：删除后端数据后修改本地数组，再调用tableParams.reload()触发刷新，修改上述代码后这个流程就能正确同步数据了。

内容的提问来源于stack exchange，提问作者Cairo Scotti