ng-grid 不更新数据

2023-12-28

尝试使用 ng-grid 和 ASP.NET MVC 创建简单的工作应用程序。客户端:

  var app = angular.module('TestApp', ['ngGrid'])
  app.controller('MainController', function ($scope, $http) {
  $scope.addresses = []

  $scope.filterOptions = {
    filterText: "",
    useExternalFilter: true
  };

  $scope.update = function () {
        $http.get('/Home/GetData', {
            params: { filter: $scope.filterOptions.filterText }
        })
        .then(function (result) {
            $scope.addresses = result.data
            //alert(JSON.stringify(result))
        })
        $scope.$apply()
 }

 $scope.update()

 $scope.gridOptions = {
    data: 'addresses',
    headerRowHeight: '50',
    columnDefs: [
    { field: 'country', headerCellTemplate: '<table><tr><td>Country</td></tr><tr><td ng-controller="MainController"><input type="text" placeholder="" ng-model="filterOptions.filterText"/></td></tr></table>' },
    { field: 'city'},
    { field: 'street'},
    { field: 'house'},
    { field: 'zipcode'},
    { field: 'datec'}
    ]
};

$scope.$watch('filterOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        $scope.update()
    }
}, true);

我可以看到我从以下位置获得了正确的数据:

 public ActionResult GetData(string filter)
    {
        var query = from c in db.Addresses where c.country.Contains(filter) select c;

        return Json(query.ToList(), JsonRequestBehavior.AllowGet);
    }

在我的代码中,调用了 .then 回调,我可以浏览所有返回的 adin data.addresses。然而,网格中没有显示任何内容。控制台中没有出现错误。


对于遇到此问题的其他人,该问题已被更多人记录here https://github.com/angular-ui/ui-grid/issues/1302

我认为问题在于(因为我从来没有时间深入研究模块以了解发生了什么),任何缓存的对象引用都将与其模板表示一起重用。我无法仅通过更改几个对象来重现该问题,但在我通过过滤/排序管道处理来自 ui-grid 的输入数据后,这种情况也发生在我身上。最后,我将得到一个包含新对象和旧对象(引用)的数组,而且对象也发生了变异。

所以最后,当我遇到这个问题时,我使用了angular.copy

$scope.uiGridOptions.data = angular.copy(theNewResultedArray);

使用它更像是一种解决方法,并且要小心,因为它会产生一些性能影响,并且仅当数据未成功更新时才应限制此用例。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-grid 不更新数据 的相关文章

随机推荐