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

回答

相關問題