Steven Yates Steven Yates - 2 months ago 195
TypeScript Question

Angular 2 model function interpolation - self.context.$implicit.X is not a function


I am getting an error when trying to bind to a function on a model

I have the following Component, Model & Html (all fake for this example)

export class TestModel {
public getSomeValue(): string {
return "Hello World";

Let's just assume the testModels property get's it's data somehow.

public class MyComponent {
public testModels: TestModel[];

ngOnInit() {

public loadData(): void
.map(r=>r.json as TestModel[]) // <--- I think now you've asked the question, I see the problem on this line
.subscribe(d=>this.testModels = d);


Now in my html

<div *ngFor="let testModel of testModels">
<span>{{testModel.getSomeValue()}}</span> <!-- This fails -->

This is the full error:

error_handler.js:48 EXCEPTION: Error in
./MyComponent class MyComponent- inline template:94:56 caused by:
self.context.$implicit.getSomeValue is not a function

Is is not possible to bind to
or am I doing this wrong?

I'm assuming based on this
it's loosing it's context somehow and not calling the method on the model but attempting to call it on "it's self" what ever that is?



EDIT: Added code to show how testModels is instantiated


as TestModel[] doesn't make it a TestModel. It just tells the typescript compiler (and linter) that it can safely assume that r.json is TestModel[].

See also JSON to TypeScript class instance?