如何设置 AG-Grid 的高度以自动匹配数据内容高度？答案

【问题标题】：How do I set AG-Grid's height to automatically match the data content height?如何设置 AG-Grid 的高度以自动匹配数据内容高度？
【发布时间】：2019-02-10 14:59:09
【问题描述】：

我正在尝试让 ag-grid 的高度与内容相匹配。

我有几组数据正在尝试加载到不同的网格中，每组都有适合数据的高度。

有一个 AutoHeight 选项，但 Angular 版本似乎不起作用（我假设这是以前的版本）。

这是我的替代尝试，但不起作用：

                <ng-container *ngFor="let reportItem of reportData">
                    <br />
                    <ag-grid-angular style="width: 100%; height: {{ 560 + (reportItem.data.length * 40) }}px;"
                                     class="ag-theme-material bold-headers"
                                     [rowData]="reportItem.data"
                                     [columnDefs]="columnDefs">
                    </ag-grid-angular>
                </ng-container>

有人有更好的建议吗？

而不仅仅是链接到我在顶部描述的自动网格高度方法 - 我尝试过但失败了，您能否解释一下我应该如何使用上面的代码实现它？（我承认我可能错过了一些东西）

谢谢

【问题讨论】：

标签： angular6 ag-grid

【解决方案1】：

api 对象上有可用的 setGridAutoHeight 方法。您需要从gridReady 事件中获取对该对象的引用，然后您可以调用它，将true 传递给它。如果你的数据有很多行，你必须小心，因为使用这种方法所有的行都会被渲染到 DOM，通常只渲染可见的行。

gridApi.setGridAutoHeight(true)

在页面底部：https://www.ag-grid.com/javascript-grid-api/

【讨论】：

我收到Property 'setGridAutoHeight' does not exist on type 'GridApi'
我在 Vue.js 中使用 AgGrid，它在我这边运行良好。我想您必须在 Angular 中使用 TypeScript。尝试直接在grid api对象中找到方法，那么我认为你必须在TypeScript类型声明文件中声明它。
No 看起来它根本不是 api 的一部分，即使它在文档中 - 尽管实际上没有任何 Angular 特定文档，它都只是链接到 javascript 文档。
使用这个和设置 domLayout='autoHeight' 有什么区别？ ag-grid.com/javascript-grid-width-and-height/#auto-height
@Chris 看起来很相似。我不确定，也许一个比另一个大。不能推荐其他。

【解决方案2】：

根据这个link，您可以使用domLayout='autoHeight' 作为网格的属性。

它对我有用。

【讨论】：