ag-grid 中默认自动调整列大小

Question

我正在尝试使用 AG-Grid 和角度框架默认设置自动调整列大小。所以我与点击事件一起使用gridColumnApi.autoSizeColumns并且工作正常。但是当我尝试使用this.autoSizeAll()ngOnInit() 默认情况下设置自动调整列大小时，我收到此错误 Cannot read property 'getAllColumns'

我不知道默认情况下无需单击按钮即可自动调整列大小的最佳方法是什么？

<button (click)="autoSizeAll(false)">Auto-Size All</button>

<ag-grid-angular
    style="width: 900px; height: 700px;"
    class="ag-theme-balham"
    [rowData]="rowData"
    [defaultColDef]="defaultColDef"
    [columnDefs]="columnDefs"
    (firstDataRendered)="onFirstDataRendered($event)"
    (gridReady)="onGridReady($event)">
</ag-grid-angular>



ngOnInit(){
  this.autoSizeAll();
}

autoSizeAll() {

  const allColumnIds = [];
  // tslint:disable-next-line:only-arrow-functions
  this.gridColumnApi.getAllColumns().forEach(function(column) {
    allColumnIds.push(column.colId);
  });
  this.gridColumnApi.autoSizeColumns(allColumnIds);
}

onGridReady(params) {

  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
  this.http
    .get(
      'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json'
    )
    .subscribe(data => {
      this.rowData = data;
    });
}
}

这是笨蛋

Answer 1

您甚至在函数初始化之前就调用了该函数gridColumnApi。初始化后尝试调用this.autoSizeAll()该函数。onGridReadythis.gridColumnApi

onGridReady(params) {

  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
  this.autoSizeAll();  // do your autosizing here
  this.http
    .get(
      'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json'
    )
    .subscribe(data => {
      this.rowData = data;
    });
}