为什么我不能在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()一个比我的例子。

你能提供一个Plunker？理解代码的哪部分是什么组件以及它们如何相关是非常麻烦的。 –

或者更好的是，在这里有一个Stack Snippet（'[<>]'工具栏按钮）。 –

其中allFoos是定义的。如果这个模板对应于Foo组件，那么Foo必须有一个** private allFoos：Foo []; ** – kimy82

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

更好的格式您的初始化名字或当你需要格式化它，在你的组件类，并只使用属性名称{{}}

2016-12-01 12:11:15 lastWhisper

回答