Ag Raster zeigt keine Daten

Question

Ich versuche, diese Ag Grid for Angular CLI zu implementieren, habe ich alle Schritte, die sie in der Dokumentation erwähnt haben, gefolgt, aber die Spalte Wert ist leer und zeigt die Daten nicht an. Ich sehe keinen Fehler in der Konsole. Ich habe versucht zu debuggen, aber kein Glück. Bitte helfen

Bitte sagen Sie mir, was ich falsch mache

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

Es ist hilft war ein dummer Fehler, ich nicht den params-Wert im Redcomponent html machen hat.

Im Folgenden Code das Problem behoben

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

Answer 2

Ich benutze einen cellrenderer zu einem Rahmen Gegensatz

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

und in Ihrem Renderer müssen Sie etwas machen. Die Standard-Grid-Renderer geben HTML aus, also müssen Sie das ebenfalls tun. d.h

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

Hoffnung, die