Angular 2 model function interpolation - self.context.$implicit.X is not a function
<p>All,</p>

<p>I am getting an error when trying to bind to a function on a model</p>

<p>I have the following Component, Model &amp; Html (all fake for this example)</p>

<pre><code>export class TestModel {    
  public getSomeValue(): string {
     return "Hello World";
  }
}
</code></pre>

<p>Let's just assume the testModels property get's it's data somehow.</p>

<pre><code>@Component(...)
public class MyComponent {    
  public testModels: TestModel[];

  ngOnInit() {
    this.loadData();
  }

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

  }
}
</code></pre>

<p>Now in my html</p>

<pre><code>&lt;div *ngFor="let testModel of testModels"&gt;
  &lt;span&gt;{{testModel.getSomeValue()}}&lt;/span&gt; &lt;!-- This fails --&gt;
&lt;/div&gt;
</code></pre>

<p>This is the full error:</p>

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

<p>Is is not possible to bind to <code>.getSomeValue()</code> or am I doing this wrong?</p>

<p>I'm assuming based on this <code>self.context.$implicit.</code> 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?</p>

<p>Thanks</p>

<p>S</p>

<p>EDIT: Added code to show how testModels is instantiated</p>