typescript 如何在 angular2 应用程序中初始化 ag-grid api
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35263658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to initialize ag-grid api in angular2 application
提问by Manish Kumar
I am working on an application built using angular2 with typescript. I am using ag-grid to display data in grid but not able to find the grid api.
我正在开发一个使用 angular2 和 typescript 构建的应用程序。我正在使用 ag-grid 在网格中显示数据，但无法找到网格 api。
/// <reference path="../../../typings/jquery/jquery.d.ts" />
import {Component} from 'angular2/core';
import {Hero, HeroService} from './hero.service';
var gridOptions;
var heroService;
import * as core from 'angular2/core';
declare var ag: any;
ag.grid.initialiseAgGridWithAngular2({ core: core });
@Component({
selector: 'gridapp',
template: `<ag-grid-ng2 #gapp class="ag-fresh" style="height: 300px; width:850px" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableSorting="true" enableColResize="true" enableFilter="true"></ag-grid-ng2>`,
directives: [(<any>window).ag.grid.AgGridNg2],
providers: [HeroService]
})
export class GridViewComponent {
private columnDefs: Object[];
private rowData: Object[];
constructor(private _heroService: HeroService) {
console.log("in Grid constructor...");
heroService = this._heroService;
this.columnDefs = [
{ headerName: "ID", field: "id", sortingOrder: ["asc", "desc"], editable: false, width: 100 },
{ headerName: "Name", field: "name", sortingOrder: ["asc", "desc"], editable: false, hide: false },
];
heroService.getHeroes()
.then(heroes =>
this.rowData = heroes
);
gridOptions = {
enableSorting: true,
rowData: this.rowData,
columnDefs: this.columnDefs,
onReady: function() {
gridOptions.api.sizeColumnsToFit();
alert(gridOptions.api);
}
}
}
}
Now when I am trying to execute any method of this.gridOptions.api it is throwing error that "gridOptions.api is undefined. Examples mentioned on ag-grid siteare not working for typescript and angular2.
现在，当我尝试执行 this.gridOptions.api 的任何方法时，它会抛出错误“gridOptions.api 未定义。ag-grid站点上提到的示例不适用于 typescript 和 angular2。
How can I initialize and use gridApi in angular2 with typescript?
如何使用打字稿在 angular2 中初始化和使用 gridApi？
采纳答案by dfsq
You want to initialize gridOptionsas a property of the class, not just a variable. So it should be this.gridOptions:
您想初始化gridOptions为类的属性，而不仅仅是变量。所以应该是this.gridOptions：
constructor(private _heroService: HeroService) {
console.log("in Grid constructor...");
this.columnDefs = [
{ headerName: "ID", field: "id", sortingOrder: ["asc", "desc"], editable: false, width: 100 },
{ headerName: "Name", field: "name", sortingOrder: ["asc", "desc"], editable: false, hide: false }
];
this._heroService.getHeroes().then(heroes => this.rowData = heroes);
this.gridOptions = {
enableSorting: true,
rowData: this.rowData,
columnDefs: this.columnDefs,
onReady: () => {
this.gridOptions.api.sizeColumnsToFit();
alert(this.gridOptions.api);
}
}
}
回答by Matrim
The above 'almost' got me there in ang 2 rc1 but I found i needed the Grid Options link in the html as well so
上面的“几乎”让我在 ang 2 rc1 中找到了，但我发现我也需要 html 中的 Grid Options 链接，所以
<ag-grid-ng2 id="mastergrid" #agGrid style="height: 100%; width:100%" class="ag-fresh"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[showToolPanel]="showToolPanel"
[rowData]="rowData"
enableSorting
enableRangeSelection:true
suppressRowClickSelection
enableFilter
toolPanelSuppressValues
toolPanelSuppressGroups
debug="false"
draggable="false"
rowHeight="22"
rowSelection='multiple'>
</ag-grid-ng2>
and
和
ngOnInit(){
this.gridOptions = <GridOptions>{
onGridReady: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
}
this worked perfectly and the grid resized as the window moved. Thanks to dfsq as I would not have used the handy onGridReady either :)
这工作得很好，随着窗口移动，网格调整了大小。感谢 dfsq 因为我也不会使用方便的 onGridReady :)
回答by Malindu Sandaruwan
In your ts file there is a gridOptionsvariable declared in class level.
var gridOptions;But you are not assigning any value for it. So it's undefined.
在您的 ts 文件中，有一个在类级别声明的 gridOptions变量。
var gridOptions;但是您没有为其分配任何值。所以它是undefined。
Inside the constructoryou are assigning a value for a gridOptionsvariable which is local to that method.
在构造函数中，您正在为该方法本地的gridOptions变量分配一个值。
However the gridOptionsyou have bind with grid is the class level variable which is undefined. So you are getting an error. So modify the code like follows.
但是，您与 grid 绑定的gridOptions是未定义的类级别变量。所以你得到一个错误。所以修改代码如下。
constructor(private _heroService: HeroService) {
....
this.gridOptions = {
enableSorting: true,
rowData: this.rowData,
....
