为什么我不能在ngFor中调用成员函数？

Question

我有：

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()复杂得多。{/ p>

Answer 1

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

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