angularjs ag-grid 不显示行数据

Question

我正在使用 ag-grid return 来自服务器的 1 行数据。数据来自服务器 returning 并且设置在网格中但数据未显示。这是我的网格：

$scope.lastResultGridOptions = {
    rowData: $scope.jobResult,
    suppressCellSelection: true,
    suppressSorting: true,
    enableFilter: true,
    enableColResize: true,
    angularCompileRows: true,
    angularCompileHeaders: true,
    suppressMenuHide: true,
    columnDefs: [{
        field: 'StartDate',
        filter: 'text',
        headerName: 'Start Date',
        cellClass: 'wrap-text',
        minWidth: 10
    }, {
        field: 'EndDate',
        filter: 'text',
        headerName: 'End Date',
        cellClass: 'wrap-text',
        minWidth: 40
    }, {
        field: 'IsSuccess',
        filter: 'text',
        headerName: 'Result Status',
        cellClass: 'wrap-text',
        minWidth: 40
    }, {
        field: 'DateCompleted',
        filter: 'text',
        headerName: 'Date Completed',
        cellClass: 'wrap-text',
        minWidth: 40
    }]
};

这个函数在初始化时被调用：

$scope.refreshLastResultGrid = function () {
jobResult.paged().$promise.then(function (results) {
    $scope.jobResult = results;
    $scope.lastResultGridOptions.rowData = $scope.jobResult;

    if ($scope.lastResultGridOptions.api) {
        $scope.lastResultGridOptions.api.setRowData();
        $scope.lastResultGridOptions.api.sizeColumnsToFit();
    }
}, function (error) {
 $scope.messageModalVariables = {
messageTitle: 'Error Refreshing Job Result',
messageDisplay: 'API Error. Could not retrieve job results.',
messageType: 'Error',
okIsHidden: false,
yesNoIsHidden: true
};
$scope.openMessageModal($scope.messageModalVariables);
        });
    };

$scope.refreshLastResultGrid();

这是对 return 行的服务器的服务调用：

angular.module('vAnalyzeApp.services')
.factory('JobResult', function($resource, configSettings) {
 var jobresult = $resource(configSettings.apiServiceUrl + 'api/v1/jobresult', {}, {
   'paged': {
     method: 'GET',
     isArray: false,
     transformResponse: function(data, headers) {
      var count = headers('Count');
      return {
        count: angular.fromJson(count),
        results: angular.fromJson(data)
      };
    }
   }
 });
 return jobresult;
});

我在 refreshLastResultGrid 函数中调试，results 从服务器返回并设置为 $scope.lastResultGridOptions.rowData。 setRowData() 函数已完成且没有错误，但数据未显示在网格上。这是网格的屏幕截图：

为什么网格中没有显示数据？

更新结果对象是：

public class JobParameterDto
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string SourceDB { get; set; }
    public string TargetDB { get; set; }
    public Nullable<DateTime> DateCompleted { get; set; }
    public Nullable<bool> IsSuccess { get; set; }
}

当我查看结果对象时，这是正确的数据 returned:

开始日期：'01/01/2016T00:00:00'
结束日期：'11/01/2016T00:00:00'
目标数据库：'MainDB'
SourceDB：'WrhDB'
IsSuccess: 空
完成日期：空

Answer 1

您应该使用 api.setRowData 来设置网格行。确保 results.data 是一个 Array - ag-grid 期望 rowData 是一个 Array.

...
jobResult.paged().$promise.then(function (results) {
    $scope.jobResult = results instanceof Array?results:[results];
    if ($scope.lastResultGridOptions.api) {
        $scope.lastResultGridOptions.api.setRowData($scope.jobResult);
        $scope.lastResultGridOptions.api.refreshView();
        $scope.lastResultGridOptions.api.sizeColumnsToFit();
    }
}, function (error){
...

angularjs ag-grid 不显示行数据

angularjs ag-grid does not show row data

angularjs

ag-grid