Question

我是Ionic 2和AG-grid的新手。我一直在玩一个示例离子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中的app css中。

示例：

class func createContainerViewController<T:UIViewController, U:UIViewController>(withCenterViewController centerViewController: T, andLeftViewController leftViewController: U) -> ContainerViewController where T: CenterViewController, U: SidePanelViewController

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

2 个答案: