Angular：调用插值括号内的函数

Question

在我的 Angular 项目中，我有一个 class A：

export class A {
    id: number;

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

在我的组件中，我有一个 A 类型的数组，所以 component.ts 有一行：

arrayOfAs: Array<A>;

在 component.html 中，我只想在 ngFor 循环中显示数字和字符串函数的结果：

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

可以显示id，但是对于函数我得到错误：

TypeError: _v.context.$implicit.displayName 不是函数

如何在插值中使用函数？

显然这只是我真实案例的简化版本。谢谢

Answer 1

当变量绑定到名称 element 时，您正在调用 a.displayName()。尝试 element.displayName()

否则请确保数组包含 class A 的真实实例，如评论

中所建议

Angular: Call a function within the interpolation brackets