Encountering an issue trying to utilize a method within an angular2 component. Here's the code snippet :
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AgGridModule } from 'ag-grid-angular/main';
import { GridOptions, GridApi, ColumnApi } from "ag-grid";
import { AllService } from './all.service';
import { SomeClass } from './someClass';
import { ResponseData, Links } from './response';
import 'rxjs/Rx';
@Component({
selector: 'all',
styleUrls: ['./all.scss'],
templateUrl: './all.html'
})
export class AllComponent implements OnInit {
embedded: Array<SomeClass>
page: number;
page_count: number;
link: Array<Links> = [];
total_items: number;
page_size: number;
private gridOptions: GridOptions = {
enableFilter: true,
enableSorting: true,
//pagination: true,
enableColResize: true,
animateRows: true
};
private api: GridApi;
private columnApi: ColumnApi;
private json : JSON;
private test : String;
private n : number = 0;
constructor (private service: AllService, private router: Router) {
}
ngOnInit(){
this.getData();
}
private myRowClickedHandler(event) {
this.goToDetail(event.data.uuid);
}
private getData(){
this.service.getInitData().subscribe(data => {
this.embedded = data._embedded.some_class;
this.page = data.page;
this.page_count = data.page_count;
this.page_size = data.page_size;
this.total_items = data.total_items;
this.link[0] = data._links;
this.createGrid();
this.gridOptions.api.addEventListener('rowClicked', this.myRowClickedHandler);
});
}
private createGrid(){
this.n = this.embedded.length;
this.gridOptions.columnApi.autoSizeColumns;
this.gridOptions.api.setColumnDefs(this.createColumnDefs());
this.gridOptions.api.setRowData(this.createRows());
this.gridOptions.api.sizeColumnsToFit();
}
private createRows(){
var rowData:any[] = [];
var regexp1 = /[a-zA-Z0-9]*$/;
for (var i = 0; i < this.n; i++) {
rowData.push({
uuid: this.embedded[i].uuid,
state: this.embedded[i].state,
executionDate: this.embedded[i].executionDate,
startDate: this.embedded[i].startDate,
endDate: this.embedded[i].endDate,
taskClass: regexp1.exec(this.embedded[i].taskClass)[0],
humanDuration: this.embedded[i].humanDuration,
humanMemoryConsumption: this.embedded[i].humanMemoryConsumption,
});
}
return rowData;
}
private createColumnDefs() {
return [
{headerName: 'uuid', field: 'uuid'},
{headerName: 'state', field: 'state', filter: 'text', cellStyle: function(params) {
switch(params.value){
case "STATE1": return {color: 'orange'};
case "STATE23": return {color: 'green'};
case "STATE8": return {color: 'red'};
}
}},
{headerName: 'executionDate', field: 'executionDate'},
{headerName: 'startDate', field: 'startDate'},
{headerName: 'endDate', field: 'endDate'},
{headerName: 'taskClass', field: 'taskClass'},
{headerName: 'humanDuration', field: 'humanDuration'},
{headerName: 'humanMemoryConsumption', field: 'humanMemoryConsumption'},
{headerName: 'action', field: 'action'}
]
}
public goToDetail(uuid: String) {
let link = ['pages/all', uuid];
this.router.navigate(link);
}
}
Encountering an error message as below :
EXCEPTION: Cannot read property 'goToDetail' of undefined
Unclear on the root cause of this issue... Could the problem be linked to the subscribe method?