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

【问题标题】：autosize columns by default in ag-grid在 ag-grid 中默认自动调整列大小
【发布时间】：2021-09-08 10:22:00
【问题描述】：

我正在尝试使用 AG-Grid 和 Angular 框架默认设置自动调整列大小。所以我用gridColumnApi.autoSizeColumns 和点击事件，它工作正常。但是当我尝试使用 this.autoSizeAll() 和 ngOnInit() 默认设置自动调整列大小时，我得到这个 error 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;
    });
}
}

这里是plunker

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

您在函数初始化gridColumnApi 之前就调用了它。初始化this.gridColumnApi后，尝试在onGridReady函数中调用this.autoSizeAll()。

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

【讨论】：

错误已经消失，谢谢。但除非我点击按钮，否则默认情况下列宽仍然不会自动调整！
我想我通过调用这个函数解决了这个问题，超时时间约为 400 毫秒。也许试试：setTimeout(()=>this.autoSizeAll(), 400)
太棒了！现在它工作正常。非常感谢！
您可以使用 ag-grid 方法 onGridReady(event)。当 ag-grid 准备好使用时调用此方法。
我正在研究 ag-grid 但在 Vue。看到这个答案后，我意识到 params.columnApi 在我正在工作的代码上拼写错误。非常感谢

【解决方案2】：

我发现最好的方法是使用modelUpdated 事件：

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

onModelUpdated() {
  this.autoSizeAll();
}

【讨论】：