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

我想调整所有3G网格的大小，但没有人被调整大小。它在控制台中没有出现错误，但显示了这个ag- grid :尝试调用sizeColumnsToFit()，但是网格正在以零宽度返回，也许网格在屏幕上是不可见的？

Answer 1

这一直是ag网格角度的问题之一，当他们引入这个回调- onFirstDataRendered时，这个问题在onFirstDataRendered中得到了解决。

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

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

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

按照医生的说法-

请注意，api.sizeColumnsToFit()需要知道网格宽度才能完成其数学运算。如果网格没有附加到DOM，那么这将是未知的。在下面的示例中，网格创建时不附加到DOM (因此api.sizeColumnsToFit()应该失败)。网格在100 to后再次检查，并尝试再次调整大小。对于某些框架(例如角)来说，这是必需的，因为DOM对象是在附加之前使用的。

示例这里

Answer 2

过去的线索，但目前的答案并没有帮助我，我发现这是通过谷歌搜索。

我也有同样的问题使用角度材料标签。第一个选项卡很好，但随后的选项卡未能调用sizeColumnsToFit，因为在选择选项卡之前，它们在DOM中是不可见的。

我试过各种网格事件，如viewportChanged，firstDataRendered等.但什么都没起作用。在选项卡被选中后，我在子组件中调用了sizeColumnsToFit()。有很多方法可以做到这一点，但我选择使用一个可观察的选项卡来更新选中的选项卡，然后触发api.sizeColumnsToFit()。