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

来源

2017-10-09 Arun Kumar

它的是一个愚蠢的错误，我没有呈现在Redcomponent HTML的PARAMS值。

下面的代码解决了该问题

<span style="color: red">{{params.value}}</span>

来源

2017-11-03 17:43:47

我用一个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; 
    } 
}

希望帮助

来源

2017-10-10 10:36:35 Matrim

Ag Grid not display data

回答

相关问题