Angular: Call a function within the interpolation brackets

Question

In my Angular Project i have an class A:

export class A {
    id: number;

    public displayName(): string{
       return "a";
    }

In my component i have an array of type A, so the component.ts has the line:

arrayOfAs: Array<A>;

In the component.html i just want to display the number and the result of the string function in a ngFor-loop:

<div *ngFor="let element of arrayOfAs">
    {{element.id}}, {{element.displayName()}}
</div>

the id can be displayed, but for the function i get the error:

TypeError: _v.context.$implicit.displayName is not a function

How can i use a function inside the interpolation?

Obviously this is just a shortend version of my real case. Thanks

Answer 1

You're calling a.displayName() when the variable is bound to the name element. Try element.displayName()

Otherwise ensure that the array contains true instances of class A as suggested in comments