我正在使用Typescript和AngularJS。 我有一个包含ui.grid指令的模板。

显示网格,稍后$ http请求获取我希望网格包含的数据。

我尝试将gridOptions.data设置为一个数组,并在$ http调用的success函数中,我将用于gridOptions.data的数组设置为返回的数据。

网格什么都没有显示。

有任何想法吗?

我要将罗马的答案标记为正确,但由于我指定我使用的是Typescript,我将展示我的完整性解决方案:

export class MyController  {
    constructor ( ) {
        //...code to setup grid, col defs, data as an empty array, etc...
        var myDataPromise = this.myHttpService.getDataForGrid();

        myDataPromise.then((data) => {
            this.gridOptions.data = data["value"];
        },(reason) => { },(update) => { });
    }
}

我的模板:

<div ui-grid='myController.gridOptions'></div>

我不确定为什么我的原始代码不能正常工作......我认为Typescript和Angular一起只是在早期煎炸我的大脑......

#1楼 票数:2 已采纳

请尝试以下方法:

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body ng-app="app">
    <div ng-controller="gridController">
        <!-- Initialise the grid with ng-init call -->
        <div ui-grid="gridOptions" ng-init="GetGridData(urlList)">
        </div>
    </div>

    <script src="Scripts/ng/angular.min.js"></script>
    <script src="Scripts/ng-grid/ui-grid.min.js"></script>
    <link rel="Stylesheet" type="text/css" href="Scripts/ng-grid/ui-rid.min.css" />

    <script type="text/javascript">

        var app = angular.module('app', ['ui.grid']);

        app.controller("gridController",
            ["$scope", "$attrs", "$element", "$compile", "$http", "$q",
            function ($scope, $attrs, $element, $compile, $http, $q)
            {
                $scope.urlList = "YourSourceUrl";

                function fnGetList(url)
                {
                    var deferred = $q.defer();
                    $http.get(url)
                        .success(function (data)
                        {
                            deferred.resolve(data);
                        })
                        .error(function (errorMessage)
                        {
                            alert(errorMessage);
                            deferred.reject;
                        });
                    return deferred.promise;
                };

                $scope.GetGridData = function (url)
                {
                    console.log("In GetGridData: " + "Getting the data");

                    //  Test Only - un-comment if you need to test the grid statically.

                    //$scope.loadData = ([
                    //        {
                    //            "UserName": "Joe.Doe",
                    //            "Email": "Joe.Doe@myWeb.com"
                    //        },
                    //        {
                    //            "UserName": "Jane.Doe",
                    //            "Email": "Jane.Doe@myWeb.com"
                    //        },
                    //]);
                    //return;

                    fnGetList(url).then(function (content)
                    {
                        //  Assuming your content.data contains a well-formed JSON

                        if (content.data !== undefined)
                        {
                            $scope.loadData = JSON.parse(content.data);
                        }
                    });
                };

                $scope.gridOptions =
                {
                    data: 'loadData',
                    columnDef:
                        [
                            { field: 'UserName', name: 'User' },
                            { field: 'Email', name: 'e-mail' }
                        ]
                };

            }
        ]);
</script>

</body>

如果您不想立即填充网格,请将呼叫删除

NG-INIT

并在其他事件上调用相关函数。

希望在不了解您的具体问题的情况下,这将指导您找到解决方案。

干杯。

  ask by Brandon translate from so

未解决问题?本站智能推荐:

2回复

UI-GRID显示json数据

目前,我正在从服务器检索数据。 [{},{}],这就是我的json对象的外观。 当我调用$ http服务并将其放在gridOptions中时:{data:this.data}我在控制台窗口中收到以下错误: TypeError:newRawData.forEach不是一个函数 。 这是
2回复

角度ui网格分组显示组行中的第一个元素

我需要在组行中显示组中的第一个值,所以首先我尝试使用聚合来显示常量,我有此列def 使用隐藏的另一列完成分组,我尝试使用带有finalize方法的自定义aggregationTree仅做 这段代码抛出错误 我不明白这是如何引发错误的,我删除了3行代码,该错误不再存在,但是我显然需要访
1回复

如何在ui-grid中使colDefn的“type”属性更通用

我是 UI-Grid 的新手,我想显示两列,作为名称和值。 如果我双击值列中的单元格,它会变得可编辑,即它的类型=文本。 如何让单元格输入复选框、数字或日期。 这个 colDefn 类型应该从数据集中获取值。 代码如下 我知道制作特定于单一类型的列。 但是如何制作包含所有类型字段的单列,如 type
1回复

按默认字段值以外的特定列按角度ui网格排序

我有一个名为Job的表: 以及具体的类: 我在我的应用程序上使用angular和Typescript,尝试显示数据时遇到以下问题: 我使用网格角度类型的ui-grid,并且具有以下列defs: 我的问题是,为了对修改日期的列进行排序,我需要将字段属性值设置为数据库列(date_m
2回复

角度2,角度1的模块

结合使用带有typescript的angularjs 2不知道如何使用ui-grid或fullcalendar这样的angular 1模块。 我可以用打字稿添加模块ui-grid吗?
1回复

DefinitelyTyped仅显示命名空间

我在ui-grid的有角项目中使用打字稿。 我已经为ui-grid安装了DefinitelyTyped文件: https : //github.com/DefinitelyTyped/DefinitelyTyped/blob/master/ui-grid/ui-grid.d.ts 在Vis
1回复

如何在UI网格角单击时关闭引导程序模态

在用打字稿编码的角度应用程序中,我使用ui网格以bootstrap modal形式显示一些数据。 我要实现的是,单击网格行模式中的任何列都将关闭。 我该如何实现? 我现在不使用$ modal或$ modalInstance ,因为它是SPA,所以不需要这样做 。 有没有一种方法不使用它们
1回复

角度ui.grid分页与分页

我是ui.grid的新手,并使用该教程获取包含大量数据的网格。 我的版本是3.0.0.RC16,我从凉亭安装angular-ui-grid 我想使用分页但是会出错。 有2个关于分页的教程称为分页和一个分页 : http://ui-grid.info/docs/#/tutorial