I think that your problem is located here:
getRisks(): Observable<RiskListSummary[]> {
return this.http.get(this.serviceUrl)
.map(this.extractData()) <== passing result of function
.catch(this.handleError()); <== passing result of function
}
You could use just passing function reference:
getRisks(): Observable<RiskListSummary[]> {
return this.http.get(this.serviceUrl)
.map(this.extractData)
.catch(this.handleError);
}
but this way you will lose this.
Or you could use bind method to retain this:
getRisks(): Observable<RiskListSummary[]> {
return this.http.get(this.serviceUrl)
.map(this.extractData.bind(this))
.catch(this.handleError.bind(this));
}
however you will lose type checking.
I would leverage arrow functions to be able to use lexical this:
getRisks(): Observable<RiskListSummary[]> {
return this.http.get(this.serviceUrl)
.map(res => this.extractData(res))
.catch(err => this.handleError(err));
}
Without it, the this variable will point to the function where the call is made, instead of the instance that contains getRisks().