ag-grid - 复制示例 ag-grid 示例并让单元格相互叠加

Question

我正在试验 ag-grid 并试图让一些非常简单的例子起作用。到目前为止，我的运气并不好。

我使用创建了一个全新的应用程序，ng new gridTest然后尝试按照这些说明进行操作。

我创建的示例站点在这里。

我生成的网格如下所示：

app.component.html：

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-theme-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  public rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ]

  public columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
  ]
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AgGridModule } from 'ag-grid-angular/main';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我究竟做错了什么？我看不出我是如何用这个非常简单的例子弄乱样式或任何东西的......

Answer 1

事实证明，这里的问题主要与风格有关。可以在这里看到固定的应用程序。

要获得网格，我必须将正确的 ag-grid 样式添加到 angular-cli.json 文件中：

  "styles": [
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/theme-fresh.css"
  ]

我不得不更改网格 div 以指向正确的样式名称：

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs"
</ag-grid-angular>

为了让列很好地显示，我必须添加一个事件侦听器：

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)">
</ag-grid-angular>

和一个处理程序：

  public onGridReady(params: any){
    params.api.sizeColumnsToFit();
  }

ag-grid 文档主要依赖于您克隆一个 git-hub 存储库并运行它。在我工作的地方，我们无法访问 github，而且我们对 npm 的访问权限有限，所以我不得不尝试将网格添加到现有项目中。当您采用这种方法时，没有文档说明您需要执行哪些步骤。