Ag grid 整个网格的ag网格自动高度

我找不到一个好方法来调整网格的大小，使其完全适合所有行

仅指向按%或px调整大小

由于我希望它根据行来调整大小，所以我提出了以下函数。好像我在重新发明轮子，所以也许有更好的方法

getHeight(type:EntityType) {
    var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
        ? this.Apis[type].api.rowModel.rowsToDisplay.length
        : -1;
    return c > 0
        ? (40+(c*21))+'px' // not perfect but close formula for grid height
        : '86%';
}

---

必须有一种不那么混乱的方式。

我遇到了这个解决方案：

这个问题有两个答案

1） 如果您使用的是v10.1.0以下的任何内容，则可以使用以下CSS来解决此问题：

.ag-scrolls {
    height: auto !important;
}

.ag-body {
    position: relative !important;
    top: auto !important;
    height: auto !important;
}

.ag-header { 
    position: relative !important;
}

.ag-floating-top {
    position: relative !important;
    top: auto !important;
}

.ag-floating-bottom {
    position: relative !important;
    top: auto !important;
}

.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
    height: auto !important;
}

2） 任何高于v10.1.0的内容，现在都有一个名为“domLayout”的属性

---

在onGridReady自动宽度和自动高度功能上添加以下代码

onGridReady = params => {
   // Following line to make the currently visible columns fit the screen  
   params.api.sizeColumnsToFit();

   // Following line dymanic set height to row on content
   params.api.resetRowHeights();
};

参考文献

---

如果以下是标记

<ag-grid-angular
  #agGrid
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  [domLayout]="domLayout"
  [animateRows]="true"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

希望对你有所帮助。
determinateheight（）{
determineHeight() {
    setTimeout(() => {
      console.log(this.gridApi.getDisplayedRowCount());
      if (this.gridApi.getDisplayedRowCount() < 20) {
        this.gridApi.setDomLayout("autoHeight");
      }
      else {
        this.gridApi.setDomLayout("normal");
        document.getElementById('myGrid').style.height = "600px";
      }
    }, 500);
  }

设置超时（（）=>{
log（this.gridApi.getDisplayedRowCount（））；
if（this.gridApi.getDisplayedRowCount（）<20）{
这个.gridApi.setDomLayout（“自动高度”）；
}
否则{
这个.gridApi.setDomLayout（“正常”）；
document.getElementById（'myGrid'）.style.height=“600px”；
}
}, 500);
}
您可以在列配置中使用
ag grid
功能
AutoHeight=true
。或者，如果您想动态计算高度，您应该使用
getRowHeight（）
回调并创建DOM元素，如
div
和
span
，并在其中添加文本，然后
div
将为其提供
偏移视线
，这样您就不会看到任何数据/行的裁剪

希望这能有所帮助。
这似乎是正确的方法，尽管我不明白您为什么要对api是否存在进行各种检查。。。过滤后是否需要更改栅格高度？或者您只是使用这一次来创建初始网格？因为api在加载期间使用网格进行初始化。无法确定getHeight在正确初始化后是否会被调用。如果使用
onGridReady
事件，则无需检查api是否存在，因为只有在api确实存在后才会触发。我正在使用[style.height]=“getHeight（）”将此属性绑定到UI元素。由UI元素在需要时调用此属性。不确定onGridReady与它有什么关系你是否在应用过滤器的任何时候更改网格的高度？谢谢，这帮助我解决了一个问题，即在所有浏览器中使用pinted columnsCall时，
autoHeight
的行为不尽相同。将数据加载到网格后，使用此方法。作为答案的一部分，该注释会更好。domLayout不适用于大量行。我有4000多行。你知道怎么解决吗？嗨！嘿，在那里的plunker中，如果你通过点击标题来查看过滤器，你会看到过滤器弹出窗口的溢出被隐藏了。你知道他们是怎么看得见的吗？