Angular：在插值括号内调用函数答案

【问题标题】：Angular: Call a function within the interpolation bracketsAngular：在插值括号内调用函数
【发布时间】：2019-08-06 17:49:50
【问题描述】：

在我的 Angular 项目中，我有一个 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 不是函数

如何在插值中使用函数？

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

【问题讨论】：

Michael 指出了一个问题。我的猜测是你也没有创建你的类的实例（你没有构造函数）。您只是在告诉类型，就像您在问题中所说的那样。无论如何，您应该避免在模板中调用函数/方法，尤其是在 *ngFor 中。它会在每次更改检测时触发。

【解决方案1】：

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

否则，请确保数组包含类 A 的真实实例，如 cmets 中所建议的那样

【讨论】：