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

Question

我是 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>

但是，当我运行（使用离子服务）时，出现以下错误..

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 中的东西？

提前感谢您的帮助

Answer 1

您缺少右括号 >:

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

Answer 2

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

中包含到您的应用 css 中

示例：

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

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

Error when trying to use ag-grid in ionic2

angularjs

ionic-framework

ag-grid

ionic2

angular