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

Posted 2023-03-28

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

【英文标题】：ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen?

【发布时间】：2020-08-23 06:40:58

【问题描述】：

 # 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() 但网格以零宽度返回，也许网格在屏幕上还不可见？

【问题讨论】：

您是否为 ag-grid 的父 div 定义了宽度？

我没有设置任何宽度。

尝试将固定宽度设置为以 px 为单位的广告网格，而不是 100%

它不起作用

【参考方案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

【讨论】：

它只适合第一个选项卡而不适合另一个选项卡并显示此错误 -- _co.onFirstDataRendered 不是函数

您需要为每个网格实例使用不同的 gridOptions。我看到您共享相同的 gridOptions