Asp.net mvc 4 带有外部数据和类型脚本的Ng网格：编译错误“；无法设置属性'；gridDim&x27；“未定义”的定义；

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

---

我开始使用ng grid和TypeScript，我的测试应用程序一启动就发现了问题。有关完整测试解决方案的链接，请参见本文底部。当然，即使在这几个文件中，我也犯了很多错误，但我想从一些开始，一步一步地了解更多

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

• 默认视图（主页/索引）的app.js。这里没有typescript，整个代码都包含在这个文件中。该代码源自ng grid文档中的分页示例，并尽量保持最简单

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

app.js可以工作，只是它在过滤方面有问题。我在这里发布了这些信息：

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

TypeError:无法设置未定义的属性'gridDim'
位于nggriddirections.directive.ngGridDirective.compile.pre(http://localhost:55203/Scripts/ng-网格-2.0.7.js:2708:37）
在诺德琳(http://localhost:55203/Scripts/angular.js:4392:13)
在KFN(http://localhost:55203/Scripts/angular.js:4015:15)
在诺德琳(http://localhost:55203/Scripts/angular.js:4400:24)
在KFN(http://localhost:55203/Scripts/angular.js:4015:15)
在publicLinkFn(http://localhost:55203/Scripts/angular.js:3920:30)
在斯特拉皮内尔酒店(http://localhost:55203/Scripts/angular.js:983:27)
at对象$get.Scope.$eval(http://localhost:55203/Scripts/angular.js:8057:28)
在对象处。$get.Scope。$apply(http://localhost:55203/Scripts/angular.js:8137:23)
在斯特拉皮内尔酒店(http://localhost:55203/Scripts/angular.js:981:15)www.js:5754

谷歌搜索发现的唯一类似问题是，但似乎与我的情况无关，因为网格选项设置得太晚了

服务器端只有一个API RESTful控制器，返回服务器分页、排序和筛选的项

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

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

---

对于像我这样的新手来说，有这样一个简单的工作示例会很好。有人能帮忙吗？

您在哪里向网格添加数据

如果您正在编写$scope.myGrid={data:“someObj”}在成功呼叫中，它将不起作用

请参见以下原因：（在中列出）

---

此错误表示Angular尝试解析

ng grid=“yourArray”

时尚未定义

gridOptions

，其中

yourArray

是提供给

gridOptions

的相同数组。在重构以前工作的

ng网格后，我遇到了同样的问题

因此，必须在应用了
ng grid=“yourray”
属性的元素之前定义
gridOptions
（而不是在该元素自己的控制器中）

我通过在某个外部元素中定义
gridOptions
解决了这个问题（例如，在global/app范围中）

顺便说一句，也许有更好的方法，但这对我来说很有效。
你必须做什么？首先是看看这是如何实现的​​你的项目和revizar如果你的查询或数据访问，通过一个服务，如果是这样，我必须添加文件，管理路由应用程序，客户端

保持这种状态

'use strict';

angular.module('iseApp', [
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'ngRoute',
        **'ngGrid',**
        'campaignServices',
        'dialinglistServices',
        'itemServices'
    ])
    .config(function ($routeProvider, $locationProvider, $httpProvider) {
        $routeProvider

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

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

scope.isDirectiveLoaded=true;

然后，在模板中，在以下情况下使用ng：

<div ng-if="isDirectiveLoaded">
    <div ng-grid="myGrid"/>
</div>

我遇到了同样的问题，呈现了空网格。
我最终的方法是在组件中的控制器构造函数中设置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>

通过进入ng网格源代码，我发现了第一个问题，实际上是一个输入错误：t
<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>