angular - Angular4 ag-Grid：GridOptions 的 API 未定义

Question

我在我的 Angular 4 应用程序中使用免费版本的 ag-Grid。

在下面的代码中，我想在构造函数中自动调整网格的大小：

constructor(private modalService: NgbModal) {
    this.gridOptions = <GridOptions>{};

    const columnDefs = [...];
    const rowData = [...];

    this.gridOptions.columnDefs = columnDefs;
    this.gridOptions.rowData = rowData;

    this.gridOptions.api.sizeColumnsToFit();
}

但是在开发人员工具中，我收到以下错误：

错误类型错误：无法读取未定义的属性“sizeColumnsToFit”

Answer 1

将 api 函数挂钩到 onGridReady 事件上的 Api 对象，您需要在构造函数中设置...

 constructor() {
    this.gridOptions = <GridOptions>{
      onGridReady: () => {
        this.gridOptions.api.addEventListener('rowClicked', this.myRowClickedHandler);
      }
    };

myRowClickedHandler(event) {
     this.createdDate = event.data.createdDate;
}

Answer 2

在 html 中为网格选项和网格创建绑定：

  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"

在组件中定义一个空的网格选项变量：

gridOptions: GridOptions = {}

然后在准备好网格时，您可以使用网格选项：

onGridReady(params) {
  this.gridOptions.isExternalFilterPresent  =  this.isExternalFilterPresent.bind(this)
  this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)   
}

Answer 3

有时而不是 this.gridOptions.api.setColumnDef 使用 this.gridOptions.columnDef = [] 修复问题

Answer 4

在回调中分配你gridOptions.api的：event.apionGridReady

// gridOptions as a component field

gridOptions = {
    onGridReady(event: GridReadyEvent) {
        this.api = event.api
    }
}

然后，一旦网格准备好，您就可以访问通道api。this.gridOptions.api另外，请确保您不使用箭头函数 (lambda)，否则this将引用组件而不是gridOptions.

Answer 5

gridOptions.api 仅在您创建新的 agGrid.Grid 实例后可用。例如：

this.gridOptions = <GridOptions>{};
//just an empty object right now

const columnDefs = [...];
const rowData = [...];

this.gridOptions.columnDefs = columnDefs;
this.gridOptions.rowData = rowData;
// all the gridOptions has right now is columnDefs and rowData attributes

this.gridOptions.api.sizeColumnsToFit();

//wherever you create the grid instance...
new agGrid.Grid(gridDiv, gridOptions)
//now the gridOptions object that you created has been filled out
//     with the api and columnApi attributes and functions