ag-Grid：尝试调用 sizeColumnsToFit() 但网格以零宽度返回，也许网格在屏幕上还不可见？

Question

 # in html xyz.commponent.tz

<tabset #staticTabs>
    <tab heading="User">
      <ag-grid-angular
        style="width: 100%; height: 500px;"
        class="ag-theme-material"
        [rowData]="rowData"
        [columnDefs]="columnDefs"
        [gridOptions]="gridOptions"
      >
      </ag-grid-angular>
    </tab>
    <tab heading="Whitelisted User" >
      <ag-grid-angular
        style="width: 100%; height: 500px;"
        class="ag-theme-material"
        [rowData]="rowData1"
        [columnDefs]="columnDefs1"
        [gridOptions]="gridOptions"
      >
      </ag-grid-angular>
    </tab>
    <tab heading="Blacklisted User">
      <ag-grid-angular
        style="width: 100%; height: 500px;"
        class="ag-theme-material"
        [rowData]="rowData2"
        [columnDefs]="columnDefs2"
        [gridOptions]="gridOptions"
      >
      </ag-grid-angular>
    </tab>

  </tabset>
#in xyz.component.ts
constructor() {
this.gridOptions = {
  onGridReady: () => {
    this.gridOptions.api.sizeColumnsToFit();
  },
};}

我想调整所有 3 个 ag-grid 的大小，但没有一个调整大小。它在控制台中没有给出错误，但显示了这个 ag-Grid：试图调用 sizeColumnsToFit() 但网格以零宽度返回，也许网格在屏幕上还不可见？

Answer 1

这是 ag-grid angular 的问题之一，在 v16 中引入此回调时已解决 - onFirstDataRendered

尝试在onFirstDataRendered 中调用调整大小代码而不是onGridReady-

  onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
  }

如果您使用的是旧版本，您还可以尝试在onGridReady 中调用sizeColumnsToFit 时使用小超时。

根据文档 -

注意 api.sizeColumnsToFit() 需要知道网格宽度才能按顺序 做它的数学。如果网格没有附加到 DOM，那么这个 将是未知的。在下面的示例中，网格未附加到 DOM 创建时（因此 api.sizeColumnsToFit() 应该失败）。 网格在 100 毫秒后再次检查，并再次尝试调整大小。这是 由于使用了 DOM 对象，因此某些框架（例如 Angular）需要 在连接之前。

例如here