我无法在我的角度应用程序中实现 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 行数据,但无法滚动。很抱歉停电。有人知道这里发生了什么吗?