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

4

1 回答 1

0

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

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

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

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

根据文档 -

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

这里的例子

于 2020-05-08T05:56:21.837 回答