将数据加载到网格后不显示滚动条答案

【问题标题】：No scroll bars show up after loading data to grid将数据加载到网格后不显示滚动条
【发布时间】：2019-06-29 14:02:04
【问题描述】：

我在我的 Angular 应用程序中实现 ag-grid 时遇到问题。我可以将数据加载到网格中，但是当我加载数据集时，没有滚动条。

向右显示更多列的键盘导航显示空白数据，告诉我 ag-grid 没有发现我正在滚动。

我遵循了 ag-grid 提供的所有教程，并尝试将其封装在 <div> 中。我可以更改网格的大小，但无法滚动。

component.css - (there are no global styles applied)
@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-balham.css";


component.html - 

<div style="height: 500px; width: 100%">
  <ag-grid-angular
    #agGrid
    style="height: 100%; width: 100%"
    class="ag-theme-balham"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    (gridReady)='onGridReady($event)'>
  </ag-grid-angular>
</div>


component.ts - 

import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {GridApi, GridOptions} from 'ag-grid';
import {MyService} from '../../../services/backend-calls/my-service.service';

@Component({
  selector: 'app-my-grid',
  templateUrl: './my-grid.component.html',
  styleUrls: ['./my-grid.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class MyComponent implements OnInit {
  public gridOptions: GridOptions;

  @ViewChild('agGrid') agGrid;

  title = 'app';

  columnDefs = [
    { headerName: 'Column1', field: 'col1' },
    { headerName: 'Column2', field: 'col2' }
  ];

  rowData = [];

  constructor(
    private myService: MyService
  ) {
    this.gridOptions = <GridOptions>{
      context: this,
      rowData: this.rowData,
      columnDefs: this.columnDefs,
    };
  }

  onGridReady(params) {
    this.gridOptions.api = params.api;
    this.gridOptions.columnApi = params.columnApi;
  }

  ngOnInit() {
    this.refreshGridData();
  }

  private refreshGridData() {
    // Propriatary code. Calls MyService to get row data, and updates
    // this.rowData
  }
}

从下面的截图可以看出，没有滚动条。我至少有 500 行数据，但无法滚动。很抱歉停电。有人知道这里发生了什么吗？

【问题讨论】：

另一个可能的问题是，如果我没有为外部 div 指定高度（以像素为单位），则整个列表都不会显示。 % 的高度也有同样的问题。
Here is a screenshot
您的问题会通过演示问题更容易回答。您可以尝试从这里开始：plnkr.co/edit/9AzJAMG3w4U7MaANWLe8?p=preview。或来自documentation 的任何其他示例。

标签： angular scrollbar ag-grid ag-grid-angular

【解决方案1】：

指定 div 可以溢出。 div应该如下：

<div style="height: 500px; width: 100%; overflow-y: scroll">

【讨论】：

不幸的是，这并没有解决问题，因为滚动条是灰色的。
哦，对了，这行不通，因为你有一个网格。当你把 overflow-y:scroll 作为的一部分时会发生什么？所以：style="height: 100%; width: 100%; overflow-y: scroll"
其实是一样的。显示一个灰色的条。

【解决方案2】：

所以我认为我所做的一切都是正确的，因为我找到的解决方案是将我的版本从 ^20.0.0 回滚到 ^18.1.2。运行“npm update”后，一切似乎都运行良好，无需更改代码。

【讨论】：