Currently, I am utilizing ag-grid and need help understanding a specific issue. In my method for preparing GridOptions, I have set up an onCellValueChanged event that triggers a service component to access the database and populate the data. However, when this event is activated, the service component is undefined. Strangely, if I move the event declaration to the HTML template, it fires correctly and the service component is defined.
This indicates that the event defined in the HTML template works flawlessly
<ag-grid-angular #agGridProject class='ag-theme-bootstrap' style="width:100%; height: 650px;" [gridOptions]="gridOptions"
(cellValueChanged)="onCellValueChanged($event)"></ag-grid-angular>The code snippet causing the problem:
private prepareGrid() {
this.gridOptions = <GridOptions>{
columnDefs: this.ColumnDefs,
enableSorting: true,
enableFilter: true,
rowSelection: 'single',
rowHeight: 22,
animateRows: true,
pagination: true,
enableColResize: true,
// onCellValueChanged: this.onCellValueChanged,
onGridReady: this.onGridReady,
context: {
componentParent: this
}
};The function triggered by the event which involves the service:
private onCellValueChanged(params: any) {
const projectData = params.data;
console.log(params.data);
const model = new UpdateProjectRequest(projectData.firmId, projectData.description, projectData.notes);
console.log(new Date().toUTCString(), projectData.id, model);
const e = this.stratoApiProjectService;
this.stratoApiProjectService.updateProject(projectData.id, model);
}I suspect the root of the issue could be related to the Typescript pre-processor or possibly a bug in the code implementation. Can someone provide clarification on this matter?