После загрузки данных в сетку полосы прокрутки не отображаются - PullRequest
Новая
       15

После загрузки данных в сетку полосы прокрутки не отображаются

0 голосов
/ 05 февраля 2019

У меня проблемы с реализацией 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 строк данных, но нет способа прокрутки.Извините за затемнение.Кто-нибудь знает, что здесь происходит?

no scroll

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Так что я думаю, что все делал правильно, потому что решение, которое я нашел, было откатить мою версию с ^ 20.0.0 до ^ 18.1.2.После запуска «npm update» все работает нормально, без изменений кода.

0 голосов
/ 05 февраля 2019

Укажите, что div может переполниться.Div должен быть следующим:

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

...