如果函数只是返回文本，在模板中变量和函数调用之间是否存在差异?

Question

目前，我想创建一个数组，其中对象有一个应该在模板中调用的函数，并且在几乎所有情况下，该函数将返回简单的文本，没有任何条件或任何硬逻辑。

如果函数返回简单的文本而不带任何条件或任何逻辑，可能会对性能产生一些影响。

这里有一个简单的例子，我将使用

https://stackblitz.com/edit/stackoverflow-table-example?file=src/app/table-basic-example.ts

Answer 1

是的，这可能会对性能产生影响，因为每次在angular中检测到变化时都会调用函数，这可能是很多次。如果你仍然想使用这个，你可以使用OnPush更改检测，这将减少从模板调用函数的时间

Answer 2

补充我的评论。一般来说，当我们有一个对象数组的时候最好是转换数组而不是在。html中使用函数因为这样我们就可以调用函数transform;只有一次。

如果数组是

myArray:[{name:...,other:...},{name:...,other:...}..]

我们可以，例如

this.myArray.forEach(x=>{
x.name=x.name+' '+x.other //e.g. you concatenate
x.anotherProperty=this.calculate(x)  //create a new property using a function
...what ever we want...
})

或者使用map

最好使用

<!--this has a poor performance-->
<div *ngFor="element of myArray">
{{element.name+' '+element.other}}
{{calculate(element)}}
</div>

您可以检查添加函数"calculate"aconsole.log.

在第一种方法中，函数"calculate"只执行数组中元素的个数。在第二种方法中调用Compare with。

嗯，你可以"玩"。使用ChangeDetectionRef和ChangeDetectionStrategy(但这会使应用程序复杂化)或接受"性能差"。(实际上，如果你没有大量的元素或者函数非常复杂，你通常不会注意到这一点)

Answer 3

最后，我发现在value函数中使用纯管道会对性能产生影响。谢谢@Eliseo的替代方案，我会考虑整合那个。