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

Question

All,

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.

@Component(...)
public class MyComponent {    
  public testModels: TestModel[];

  ngOnInit() {
    this.loadData();
  }

  public loadData(): void
  {
     this.http.get("...")
     .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 -->
</div>

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 .getSomeValue() or am I doing this wrong?

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

Thanks

S

EDIT: Added code to show how testModels is instantiated

Yep it's actually a web service. I'll update the code example to show — Steven Yates
– Steven Yates, Commented Oct 25, 2016 at 8:49

Community · Accepted Answer · 2017-05-23 12:09:51Z

5

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?

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Oct 25, 2016 at 8:59

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steven Yates Over a year ago

Thank you @Günter Zöchbauer

NinjaOnSafari · Accepted Answer · 2018-02-14 08:00:20Z

1

you can add a getter to your typescript class

export class Person {
    firstname: string;
    lastname: string;
    get name(): string {
        return `${this.firstname} ${this.lastname}`;
    }
}

answered Feb 14, 2018 at 8:00

NinjaOnSafari

1,0261 gold badge10 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related