ag-grid - ag-grid - 列标题和第一行之间的空间

Question

网格标题行和第一个数据行之间有一个空格 - 我如何删除它？谢谢我的代码：

<div>
        <ag-grid-angular style="width: 500px; height: 500px;" [headerHeight]="0" [rowData]="rowData"
          [rowSelection]="rowSelection" [rowMultiSelectWithClick]="true" [columnDefs]="columnDefs"
          [floatingFiltersHeight]="0" (gridReady)="onGridReady($event)">
        </ag-grid-angular>
      </div>



    columnDefs = [{
    headerName: 'id', field: 'id', editable: true, suppressToolPanel: true, filter: false, hide: true
  },
  {
    headerName: 'payrollcode', field: 'payrollcode', editable: true, suppressToolPanel: true, filter: false
  },
  {
    headerName: 'select', field: 'select', editable: true, suppressToolPanel: true, filter: true, cellRendererParams: { checkbox: true }
  }];

请在下面找到屏幕截图网格的代码。

 @Input()
  displayObject: Array<any> = [];
  @Input()
  title = '';

  columnDefs = [];
  calcHeight$ = of(30);
  loading$;
  rowData = [];
  constructor(
    public activeModal: NgbActiveModal,
    private calendarService: CalendarService,
    private injector: Injector,
    private modalService: NgbModal,
    private sdToastService: SdToastService) { }

  ngOnInit() {

    Object.keys(this.displayObject[0]).forEach(key => {
      this.columnDefs.push({ headerName: key, field: key, sortable: true, filter: true });
    });
    // this.rowData.concat(this.displayObject);
    this.rowData = this.displayObject;
    console.log(this.rowData);

  }


 

      <div style="width: 400px; height: 400px;">
      <ag-grid-angular style="width: 600px; height:300px;" class="ag-theme-balham" [rowData]="rowData"
        [columnDefs]="columnDefs">
      </ag-grid-angular>
    </div>

我在屏幕截图中添加了网格的代码。

这是一个更好地显示问题的屏幕截图：

import { Component, Injector, Input, OnInit } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { of } from 'rxjs';
import { CalendarService } from '../calendar.service';

@Component({
  selector: 'app-preview-calendars',
  templateUrl: './preview-calendars.component.html',
  styleUrls: ['./preview-calendars.component.css']
})
export class PreviewCalendarsComponent implements OnInit {
  @Input()
  displayObject: Array<any> = [];
  @Input()
  title = '';

  columnDefs = [];
  calcHeight$ = of(30);
  loading$;
  rowData = [];
  constructor(
    public activeModal: NgbActiveModal,
    private calendarService: CalendarService,
    private injector: Injector,
    private modalService: NgbModal,
) { }

  ngOnInit() {

    Object.keys(this.displayObject[0]).forEach(key => {
      this.columnDefs.push({ headerName: key, field: key, sortable: true, filter: true });
    });
    // this.rowData.concat(this.displayObject);
    this.rowData = this.displayObject;
    console.log(this.rowData);

  }

}



  <div style="width: 400px; height: 400px;">
      <ag-grid-angular class="ag-theme-balham" [rowData]="rowData" [columnDefs]="columnDefs">
      </ag-grid-angular>
    </div>

您会看到第一行占用了太多空间，而最后一行被隐藏了——这就是似乎显示空行的问题。

数据：

标签： ag-gridag-grid-angular

Answer 1

我有完全相同的问题。我将网格嵌入到 prosemiror 文档中。white-space: break-spaces是什么破了ag-grid。

设置white-space: normal !important修复了标题间距问题。