ng-Table在重新加载请求时未呈现新数据

  • Z时代
  • 2024-01-10
  • 分类：问答

我有ng-table的页面，可以很好地处理初始数据。我有一个选择框，该框根据选择的选项发送服务器请求，然后Iam将新数据获取为angular，但未使用ng-

table更新。

这是我的看法：

<section data-ng-controller="ReportsController">
<div class="plain-box">
    <table ng-table="tableParams" show-filter="true" class="table table-striped">
        <thead>
        <tr>
            <th ng-repeat="column in columns" ng-show="column.visible"
                class="text-center sortable" ng-class="{
                    'sort-asc': tableParams.isSortBy(column.field, 'asc'),
                    'sort-desc': tableParams.isSortBy(column.field, 'desc')
                  }"
                ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
                {{column.title}}
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in $data">
            <td ng-repeat="column in columns" sortable="column.field">
                {{user[column.field]}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

我的控制器：

angular.module('reports').controller('ReportsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Reports', '$filter', 'ngTableParams',
function($scope, $stateParams, $location, Authentication, Reports, $filter, ngTableParams ) {
    $scope.reportBillingPeriod = 0;
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) {
        $scope.findReportData( newValue );
    });
    //$scope.reportBillingData = 0;
    $scope.findReportData = function( selectedMonth ){
        var selectedPeriod = selectedMonth;
        if( selectedPeriod === null )
        selectedPeriod = '0';
        $scope.customers_report = Reports.customer_report({
        monthReport: selectedPeriod
        }, function( result ){
        var data = result.customers;
        $scope.columns = [
            { title: 'Account Name', field: 'accountName', visible: true, filter: { 'name': 'text' } },
            { title: 'Gross Revenue', field: 'planTotalAmount', visible: true }
        ];
   $scope.$watch('result', function () {
        $scope.tableParams.settings().$scope = $scope;
        $scope.tableParams.reload(); 
    });
        $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10,          // count per page
            filter: {
            name: 'O'       // initial filter
            }
        }, {
            total: data.length, // length of data
            getData: function($defer, params) {
            var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            //$scope.reportBillingData = new Date();
            }
        });
        });
    };
}]);

回答：

$scope.$watch(‘result’, function () {

$scope.tableParams.settings().$scope = $scope; <<–nested scope is replacing!!

$scope.tableParams.reload();

});

ngTable 指令会建立巢状范围，其中包含所有指令的设定才能运作，因此您不应该将它替换为ReportsController的范围，而 需要移除此列， $scope.tableParams.settings().$scope = $scope; 并且需要为 ngTable 指定所有参数，请在此处查看ngTables$scope.tableParams.reload（）第三次导致TypeError：无法将属性’$data’设置为null-reload-for-the-third-time-results-in-t/26174211#26174211)

以及最好将ngTableParams初始化和$watch用作findReportData函数之外的结果，以防止错误和不必要的重新初始化

我设置了plunk，尝试使其看起来更像原始问题，并模拟httpservice，但这不是重要的是，所有数据访问都必须在getDatafunc

里面，ngTableParams并且在设置所有需要调用的过滤器时（或者可能只是$watch像在plunk中那样使用），您必须调用$scope.tableParams.reload();，您可以尝试在上面的输入中键入一些数字，数据将会更新没问题。为清晰起见，删除了与排序，固定和过滤相关的所有代码，因此getData如下所示：

 getData: function($defer, params) {
        var selectedPeriod = $scope.reportBillingPeriod ; //selectedMonth;
         if( selectedPeriod === null )
    selectedPeriod = '0';
    $scope.customers_report = Reports.get({   //Reports.customer_report({
    monthReport: selectedPeriod
    }, function(result ){
    var data = result.customers;
     $scope.tableParams.total(data.length);
    var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    });
        }

并查看过滤器更改，如下所示：

 $scope.reportBillingPeriod = 0;
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) {
        $scope.tableParams.reload(); 
     });

删除了调用getDatafunc的重复项，在此进行

了修改，将问题放在$watch了reportBillingPeriod变量中，因此，为了防止第二次上传数据，我们必须检查值的更改方式，例如此处

$scope.reportBillingPeriod = defaultValue;
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) {
        //this how we prevent second call
        if (newValue!=oldValue)
        $scope.tableParams.reload(); 
     });

以上是 ng-Table在重新加载请求时未呈现新数据 的全部内容， 来源链接： utcz.com/qa/397789.html

回到顶部