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();
}

但是在Developer-Tools中我得到以下错误：

ERROR TypeError: Cannot read property 'sizeColumnsToFit' of undefined

Answer 1

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

Answer 2

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

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

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

Answer 3

有时代替 this.gridOptions.api.setColumnDef 使用 this.gridOptions.columnDef = [] 解决问题

Answer 4

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

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

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

gridOptions: GridOptions = {}

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

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

Angular4 ag-Grid：GridOptions的API未定义

4 个答案: