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

【问题标题】：ag-grid - space between column header and first rowag-grid - 列标题和第一行之间的空间
【发布时间】：2022-02-24 02:14:04
【问题描述】：

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

<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>

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

数据：

【问题讨论】：

能把你指的空间的截图加进去吗？
@sandeepjoshi - 添加屏幕截图 - 您会看到标题行 - 0、1、2 等，第一行从代码提供者等开始。中间有大约一行的空间。
我不明白的一件事是，当您将属性 [headerHeight] 设置为 0 时，您怎么会有标题 0 ,1,2。我也无法重新创建上述问题 here .你能创建一个 plunkr 来重现这个问题吗？
@sandeepjoshi - 你好 - 谢谢你的帮助 - 实际上屏幕截图来自另一个网格，而不是我粘贴的 ts 文件代码。这是我的错误 - 在第一个网格上，由于空间问题，我将 headerHeight 设置为 0。我添加了屏幕截图以更好地说明空间。无论如何，我会创建一个 plunkr 并希望重新创建这个问题。请注意，鉴于我的项目是 Angular 6 - ）我正在使用 ag-grid 20.0.0
我添加了截图网格的代码：

标签： ag-grid ag-grid-angular

【解决方案1】：

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

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

【讨论】：