在ionic2中尝试使用ag网格时出错

Question

我是Ionic 2和AG网格的新手。我一直在玩一个示例离子2模板(sidemenu)，并导入到Visual 2015中。一切似乎都很顺利。

我想找到一个可以使用的数据网格，然后遇到了ag网格。所以想在Ionic 2的应用中探索这一点。

按照这里的说明，我已经安装了节点包，所以我的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网格标记创建了一个错误。

因此，正如示例所示，我的页面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-网格到Ionic？是否还需要在app.bundle.js中包含ag网格库文件？

提前感谢您的帮助

Answer 1

你错过了最后的括号>

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

Answer 2

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

示例：

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