复制样本ag-grid示例并使单元格呈现在彼此之上

Question

我正在尝试使用ag-grid并尝试使用一些非常简单的示例。到目前为止，我没有太多运气。

我使用ng new gridTest创建了一个全新的应用，然后我尝试按照these说明操作。

我创建的示例网站是here。

我的结果网格如下所示：

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

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

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

  "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 repo并运行它。在我工作的地方，我们无法访问github，我们只能访问npm，所以我不得不尝试将网格添加到现有项目中。没有文档说明采用这种方法时需要采取的步骤。