javascript - 为什么我无法调用 ngFor 内部的成员函数？

我有:

export class Foo {
    id: number;
    name: string;

    public formatName() : string {
        return this.name;
    }
}

在模板中:

<ul>
  <li *ngFor="let foo of allFoos">
    <strong>{{foo.formatName()}}</strong>
  </li>
</ul>

为什么这不起作用？我只会得到 node_modules/@angular/core/bundles/core.umd.js:3076 TypeError: self.context.$implicit.formatName is not a function

我可以通过将 formatName() 函数移至父组件并提供 foo 作为参数而不是使用 this 来解决此问题，但这不是我想要的:

<ul>
  <li *ngFor="let foo of allFoos">
    <strong>{{formatName(foo)}}</strong>
  </li>
</ul>

访问例如直接在循环中使用 foo.name 也可以正常工作:

<ul>
  <li *ngFor="let foo of allFoos">
    <strong>{{foo.name}}</strong>
  </li>
</ul>

显然，我的意图是拥有一个比我的示例中的更复杂的 formatName()。

最佳答案

函数/方法几乎不应该在 {{}} 中调用，因为 Angular2 会在每个changeEvent 上更新这些语句。

在 init 时或在组件类中需要格式化时更好地格式化您的名称，并且仅使用 {{}} 的属性名称

关于javascript - 为什么我无法调用 ngFor 内部的成员函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40908646/