尝试在 ionic2 中使用 ag-grid 时出错答案

【问题标题】：Error when trying to use ag-grid in ionic2尝试在 ionic2 中使用 ag-grid 时出错
【发布时间】：2016-10-20 02:18:43
【问题描述】：

我是 Ionic 2 和 AG-grid 的新手。我一直在使用示例 ionic 2 模板（sidemenu），并导入到 Visual Studio 2015 中。一切似乎都运行良好。

我想找到一个数据网格来使用，并遇到了 ag-grid。所以想在 Ionic 2 应用程序中探索这个。

按照说明here，我已经安装了节点包，所以我的package.json中有以下内容

"ag-grid": "^4.2.7",
"ag-grid-ng2": "^4.2.2",

我已导入到测试 .ts 文件并包含指令 ..

...
import {AgGridNg2} from 'ag-grid-ng2/main'
import {GridOptions} from 'ag-grid/main'

@Component({
   directives: [AgGridNg2],
   templateUrl: 'build/pages/aggrid-page/aggrid-page.html'
})
export class AgGridPage {
   public data: Array<GridRow>;
   public columnDefs;
   public gridOptions: any;
   public showToolPanel;
   ...

现在，除了提到 SystemX..

System.config({
packages: {
    lib: {
...

所以我没有在那里做任何事情。

我还在 index.html 中包含了 css 文件

<link href="../node_modules/ag-grid/dist/styles/ag-grid.css"    rel="stylesheet" />
<link href="../node_modules/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />

我得到了 404（不知道为什么，因为路径似乎正确）。

最大的错误是ag-grid标签产生错误。

因此，根据示例，我的页面 html 中有以下内容..

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"    
  [gridOptions]="gridOptions"
  [columnDefs]="columnDefs"
  [showToolPanel]="showToolPanel"
  [rowData]="rowData"

  // boolean values 'turned on'
  enableColResize
  enableSorting
  enableFilter

  // simple values, not bound
  rowHeight="22"
  rowSelection="multiple">  
</ag-grid-ng2>

但是，当我运行（使用 ionic serve）时，出现以下错误..

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected closing tag "ag-grid-ng2" ("


 [ERROR ->]</ag-grid-ng2>
 </ion-content>
 "): AgGridPage@31:2

所以它不喜欢 ag-grid-ng2 标签，所以我没有设置正确的东西。

有谁知道将这个 ag-grid 集成到 Ionic 是否涉及更多步骤？是否需要将 ag-grid lib 文件包含到 app.bundle.js 中？

提前感谢您的帮助

【问题讨论】：

我还像您一样将 ag-grid-ng2 包含在 ionic 2 项目中，并收到以下错误：app.bundle.js:49643 Uncaught TypeError: core_1.NgModule is not a function(anonymous function )@app.bundle.js:49643378../agComponentFactory@app.bundle.js:49655s@app.bundle.js:1(匿名函数)@app.bundle.js:1380../lib/agAware@app. bundle.js:49751s@app.bundle.js:1(匿名函数)@app.bundle.js:11../components/sidebar/sidebar@app.bundle.js:15s@app.bundle.js:1e@ app.bundle.js:1(匿名函数)@app.bundle.js:1 导航到localhost:8100/?restart=719616有什么想法吗？

标签： angularjs ionic-framework angular ionic2 ag-grid

【解决方案1】：

您缺少右括号>：

  rowHeight="22"
  rowSelection="multiple"> <=== here
</ag-grid-ng2>

【讨论】：

您好，谢谢，当我试图剪切我们的一些细节时，可能是复制粘贴错误。我确定我确实有这个关闭 >（更新了上面的代码块）并删除了 cmets，错误消失了（还没有网格，但这个错误消失了）。干杯！
我可以确认问题出在 cmets

【解决方案2】：

关于 样式表：您要么需要更改 gulp 任务以将它们包含在构建中（默认情况下不包含样式表），要么像我一样将两个 css 文件复制或符号链接到您的app/themes 目录，将它们重命名为 *.scss 并将它们导入 app.core.scss。然后它们将被包含在 build/css 中的应用 css 中。

例子：

@import "./ag-grid";
@import "./theme-fresh";

【讨论】：