Angular6 - Using service outside of constructor - error as undefined

Question

getting error as service is undefined if it is called from a function outside of OnInit() or a constructor

Any help is appreciated.

the call to the function from scramble() function is giving error if code is uncommented.

Cannot read property 'getTripsByCriteria' of undefined

code is as follows

export class UpcomingTripsComponent implements OnInit{
    private gridApi;
    title = "Upcoming Trips";
    trip_list: {};
    trips: UpcomingTripList;
    rowData: any;
    private gridColumnApi: any;
    last_hours: number = 1;
    next_hours: number = 4;
    msg: string ='';
    gridOptions: any;
    private headerHeight;
    private rowClassRules;
    private smallscreen: boolean = true;
    private firsttime: boolean = true;

constructor(private upcomingTripsService: UpcomingTripsService, @Inject('BASE_URL') private baseUrl: string) {
    if (sessionStorage.getItem("last_hours")) {
        this.last_hours = Number(sessionStorage.getItem("last_hours"));
    }
    if (sessionStorage.getItem("next_hours")) {
        this.next_hours = Number(sessionStorage.getItem("next_hours"));
    }
    this.headerHeight = 70;

    this.rowClassRules = {
        "interleaved-rows": function (params) {
            return (params.node.rowIndex % 2 !== 0);
        }
    };
    this.upcomingTripsService.getTripsByCriteria(this.last_hours, this.next_hours).subscribe(result => { //works here
        this.trips = JSON.parse(result.toString());
        this.rowData = this.trips.UpcomingTrips;
    }, error => console.error(error));

}
ngOnInit() {
    alert('in ngOnInit' + this.upcomingTripsService); //works
}

changeAutorefresh(event) {
    alert('in checkbox change');
    this.scrambleAndRefreshAll();
}
scrambleAndRefreshAll() {
    setInterval(this.scramble, 10000);
}
scramble(params: any) {
    alert('in scramble' + this.upcomingTripsService); //error

    //this.upcomingTripsService.getTripsByCriteria(this.last_hours, this.next_hours).subscribe(result => {
    //    this.trips = JSON.parse(result.toString());
    //    this.rowData = this.trips.UpcomingTrips;
    //}, error => console.error(error));
    var params1 = { force: true };
    this.gridApi.refreshCells(params1);
}

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — ConnorsFan, Dec 12 '18 at 22:33

Igor · Accepted Answer · 2018-12-12T21:41:31.263

4

It has to do that this is being (re)assigned to the window instead of the component instance. Use arrow functions to capture this when passing methods.

scrambleAndRefreshAll() {
    setInterval(() => this.scramble(), 10000);
}

or use bind

scrambleAndRefreshAll() {
    setInterval(this.scramble.bind(this), 10000);
}

edited Dec 12 '18 at 21:41

answered Dec 12 '18 at 21:36

Igor

60,821
10
100
175

Made change but now the timer is not working, and not calling the function. No alert shown - alert('in scramble' + this.upcomingTripsService); – coder Dec 12 '18 at 21:43
@coder - if you are having additional problems I recommend you create an [mcve]. I recommend using https://stackblitz.com and posting the link in your question. – Igor Dec 12 '18 at 21:45
@coder - also check the browser's development console to see if there are any errors. – Igor Dec 12 '18 at 21:47
It worked! thanks. needed to be build again..somehow ng build --watch wasnt working – coder Dec 12 '18 at 22:13

Angular6 - Using service outside of constructor - error as undefined

1 Answers1