5

更新#1：在我评论过的修复之后，现在我的应用程序启动了，但是除了它的边界框和过滤器按钮和弹出窗口之外，没有渲染网格。然而，我从控制台没有收到任何错误，并且就我可以使用调试器到达的情况而言，我可以看到从服务器获取的数据是正常的。如果我使用 Batarang，我可以看到与我的模型相对应的范围，并正确填充了项目。我相应地更新了可下载的复制解决方案。谁能解释为什么 ng-grid 没有在这里更新？

我开始使用 ng-grid 和 TypeScript，一旦我的测试应用程序启动，我就会发现问题。有关完整测试解决方案的链接，请参阅本文底部。当然，即使在这几个文件中，我也犯了很多错误，但我希望有一些东西可以开始并逐步了解更多信息。

MVC 应用程序有两个客户端应用程序：

  • app.js 用于默​​认视图（主页/索引）。这里没有打字稿，整个代码都包含在这个单个文件中。该代码源自 ng-grid 文档中的分页示例，并试图保持尽可能简单。

  • MyApp.js 用于另一个视图（主页/模型）中更真实的示例。此示例使用服务、模型和控制器，其 JS 代码是从 TypeScript 编译的。为了简单起见，我只是将这些组件存储在 Scripts/App 下的 Controllers、Models 和 Services 文件夹中，每个文件只包含一个类或接口。生成的 JS 文件手动包含在视图中。

app.js 可以工作，只是它有过滤问题。我在这里发布了这些内容： 使用 ng-grid 进行服务器端过滤：绑定问题？

MyApp.js 有 ng-grid 的启动问题。应用程序一启动，就会在网格绑定中抛出一个 TypeError：

TypeError: Cannot set property 'gridDim' of undefined
    at ngGridDirectives.directive.ngGridDirective.compile.pre (http://localhost:55203/Scripts/ng-grid-2.0.7.js:2708:37)
    at nodeLinkFn (http://localhost:55203/Scripts/angular.js:4392:13)
    at compositeLinkFn (http://localhost:55203/Scripts/angular.js:4015:15)
    at nodeLinkFn (http://localhost:55203/Scripts/angular.js:4400:24)
    at compositeLinkFn (http://localhost:55203/Scripts/angular.js:4015:15)
    at publicLinkFn (http://localhost:55203/Scripts/angular.js:3920:30)
    at resumeBootstrapInternal (http://localhost:55203/Scripts/angular.js:983:27)
    at Object.$get.Scope.$eval (http://localhost:55203/Scripts/angular.js:8057:28)
    at Object.$get.Scope.$apply (http://localhost:55203/Scripts/angular.js:8137:23)
    at resumeBootstrapInternal (http://localhost:55203/Scripts/angular.js:981:15) <div ng-grid="gridOptions" style="height: 400px" class="ng-scope"> angular.js:5754

我通过谷歌搜索发现的唯一类似问题是https://github.com/angular-ui/ng-grid/issues/60，但它似乎与我的情况无关，因为网格选项设置得太晚了。

服务器端只有一个 API RESTful 控制器返回服务器分页、排序和过滤的项目。

您可以在此处找到完整的复制解决方案（只需保存、解压缩和打开；所有依赖项均来自 NuGet）；有关更多信息，请参阅 readme.txt 文件：

http://sdrv.ms/167gv0F

只需启动应用程序并单击右上角的 MODEL 即可运行抛出错误的 TypeScript 应用程序。整个应用由 1 个控制器、1 个服务和 1 个模型组成。

对于像我这样的初学者来说，有一个像这样的简单工作示例会很好。有人可以帮忙吗？

4

5 回答 5

6

此错误意味着gridOptions在 Angular 尝试解析时尚未定义ng-grid="yourArray"，其中yourArray提供给gridOptions. 在重构以前工作的ng-grid.

所以gridOptions必须在应用了属性的元素之前ng-grid="yourArray"定义（而不是在该元素自己的控制器中）。

我通过gridOptions在某处定义外部元素（例如在全局/应用程序范围内）解决了这个问题。

PS也许有更好的方法，但这对我有用。

于 2013-12-06T11:21:27.623 回答
3

您在哪里向网格添加数据？

如果您正在编写$scope.myGrid={data:"someObj"}; 在成功的通话中，它将无法正常工作。

请参阅以下原因：（在https://github.com/angular-ui/ng-grid/issues/60中列出）

You can't define the grid options in the success call. You need to define
them on the scope in your controller and then set the data or column
definitions, etc... from the success call.
于 2013-09-04T11:29:05.303 回答
0

当您在指令中添加 ng-grid 时，您必须确保在尝试解析您的 html 之前加载网格选项。

您可以在链接函数中设置一个布尔值：

scope.isDirectiveLoaded=true;

然后，在您的模板中，使用 ng-if ：

<div ng-if="isDirectiveLoaded">
    <div ng-grid="myGrid"/>
</div>
于 2015-04-09T08:21:24.820 回答
0

你必须做什么？，首先是看看这如何使你的项目和修订如果你的查询或数据访问，通过服务传输，如果是这样，我必须添加管理路由应用程序的文件，客户端。

保持这样。

'use strict';

angular.module('iseApp', [
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'ngRoute',
        **'ngGrid',**
        'campaignServices',
        'dialinglistServices',
        'itemServices'
    ])
    .config(function ($routeProvider, $locationProvider, $httpProvider) {
        $routeProvider
于 2014-05-09T22:59:10.300 回答
0

我遇到了同样的问题，渲染了空网格。我最终得到它的方法是在组件内的控制器的构造函数中设置我的 this.gridOptions。在选项中，所有内容都像这样用 $ctrl 引用。所以数据引用了$ctrl.gridData。gridData 在我的组件控制器中被指定为一个属性。$ctrl 未定义为属性。这是在加载数据之前在构造函数中完成的。this.gridData 在构造函数之后定义，然后在另一个函数中填充。选项是首先定义的，我认为这从我阅读的一些内容中很重要。

对于事件挂钩传递 null 而不是 $scope。

this.gridOptions = {
    enableGridMenu: true,
    minRowsToShow: 25,
    rowHeight: 36,
    enableRowHashing: true,
    data: '$ctrl.gridData',
    rowTemplate: this.$rootScope.blockedRowTemplate,
    onRegisterApi: ($ctrl) => {
        this.gridApi = $ctrl;
        this.gridApi.colMovable.on.columnPositionChanged(null, (colDef, originalPosition, newPosition) => {
            this.saveState();
        });

        this.gridApi.colResizable.on.columnSizeChanged(null, (colDef, deltaChange) => {
            this.saveState();
        });

        this.gridApi.core.on.columnVisibilityChanged(null, (column) => {
            this.saveState();
        });

        this.gridApi.core.on.sortChanged(null, (grid, sortColumns) => {
            this.saveState();
        });
        this.gridApi.core.on.filterChanged(null, (grid, sortColumns) => {
            this.saveState();
        });
    }
};

在行模板中，我引用了组件中定义的函数。在转换为组件之前，我引用了如下函数：

ng-click="grid.appScope.jumpToExport(row.entity);"

转换为组件后，我需要在函数名称之前添加 $ctrl，如下所示

ng-click="grid.appScope.$ctrl.jumpToExport(row.entity);"

这就是在 html 中引用组件的方式

<div ui-grid="$ctrl.gridOptions" ng-if="$ctrl.gridData.length != undefined && $ctrl.gridData.length > 0" class="data-grid" ui-grid-save-state ui-grid-resize-columns ui-grid-move-columns></div>
于 2019-10-18T13:18:01.440 回答