Ag Grid n'affiche pas les données

Question

J'essaie de mettre en œuvre ce Ag Grid for Angular CLI, j'ai suivi toutes les étapes qu'ils ont mentionnées dans la documentation, mais la colonne Valeur est vide et n'affiche pas les données. Je ne vois aucune erreur dans la console. J'ai essayé de déboguer mais pas de chance. S'il vous plaît aider

s'il vous plaît me dire ce que je fais mal

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

Answer 1

Il WAS une erreur stupide, je ne rendait pas la valeur params dans le code HTML Redcomponent.

Ci-dessous le code fixe la question

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

Answer 2

J'utilise un cellRenderer par opposition à un cadre

columnDef.cellRenderer = KeyRenderer; 
columnDef.width = 20; 
columnDef.editable = false; 

et dans votre moteur de rendu que vous devez quelque chose rendre. Les rendus de grille par défaut donnent html donc vous devez faire de même. i.e.

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

espoir qui aide