Ag Grid not display data
问题描述：
我试图执行这个Ag Grid for Angular CLI，我已经按照他们在文档中提到的每一个步骤操作，但Value列是空的并且不显示数据。我在控制台中看到没有错误。我试图调试，但没有运气。请帮助Ag Grid not display data
请告诉我，我做错了
MyGridApplicationComponent
import {
Component,
OnInit
} from '@angular/core';
import {
GridOptions
} from "ag-grid";
import {
RedComponentComponent
} from "../red-component/red-component.component";
@Component({
selector: 'app-my-grid-application',
templateUrl: './my-grid-application.component.html',
styleUrls: ['./my-grid-application.component.css']
})
export class MyGridApplicationComponent {
private gridOptions: GridOptions;
constructor() {
this.gridOptions = <GridOptions> {};
this.gridOptions.columnDefs = [{
headerName: "ID",
field: "id",
width: 200
},
{
headerName: "Value",
field: "value",
cellRendererFramework: RedComponentComponent,
width: 200
},
];
this.gridOptions.rowData = [{
id: 5,
value: 10
},
{
id: 10,
value: 15
},
{
id: 15,
value: 20
}
]
}
}RedComponentComponent
import {
Component
} from "@angular/core";
@Component({
selector: 'app-red-component',
templateUrl: './red-component.component.html'
})
export class RedComponentComponent {
private params: any;
agInit(params: any): void {
this.params = params;
}
}
答
它的是一个愚蠢的错误，我没有呈现在Redcomponent HTML的PARAMS值。
下面的代码解决了该问题
<span style="color: red">{{params.value}}</span>
答
我用一个cellRenderer的，而不是一个框架
columnDef.cellRenderer = KeyRenderer;
columnDef.width = 20;
columnDef.editable = false;
，并在你的渲染需要渲染的东西。默认的网格渲染器会给出html，所以你需要这样做。即
import { ICellEditor, ICellEditorParams, ICellRenderer, CellEditorFactory } from 'ag-grid/main';
export class KeyRenderer implements ICellRenderer {
private params: any;
htmlDiv: HTMLDivElement;
init(params) {
this.htmlDiv = document.createElement("div");
this.htmlDiv.style.width = "100%";
this.htmlDiv.style.height = "100%";
this.htmlDiv.style.textAlign = "center";
this.htmlDiv.style.verticalAlign = "middle";
if (params.data.IsKeyField) {
if (params.data.IsKeyField == true) {
this.htmlDiv.innerHTML = "<img src='/images/icon/key.png' style='height:15px'/>";
}
}
}
getGui() {
return this.htmlDiv;
}
refresh(params: any): boolean {
this.params = params;
return true;
}
}
希望帮助