Angular 2调用函数4次

参考这个

它基于angular quick start示例，此处模板正在调用函数

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>{{print()}}`
})
export class AppComponent { 
  name = 'Angular';

  public print() {
    console.log(`Called`);
    return "Hello";
  }
}

打印函数被调用了4次，但UI只显示了3次。参考在第二次plunk中，检查后，Angular does throws错误表达式已更改

如果我启用生产模式，它只会被调用两次

我的问题是：

有没有办法避免这种情况？或者我应该意识到这一点，不应该在模板调用的函数中执行繁重的操作。 这是由于消化循环吗？ 在开发模式下，为什么第四个周期不刷新UI，为什么它在第三次迭代时停止，但函数第四次被调用？

---

不建议在Angular2绑定/插值中使用函数

您应该使用变量，如下所示

模板：`Hello{{name}}{{myVar}}` 名称：string=； 建造师{ 这是一个印刷品； } 公共打印：字符串{ console.log`Called`； this.name=你好； }

---

myVar=；是否根据RHS分配假定了良好的LHS类型。@SamRedway抱歉？你们想问什么或者说什么？在typescript中，myvar:string=-:string告诉我们关于数据类型声明的部分。这是不必要的。Typescript能够通过RHS识别数据类型。所以myVar=；告诉typescript myVar是一个字符串。不需要有myVar=和myVar:string=。很明显，myVar是一个字符串，因为您为它分配了一个字符串，编译器可以推断出这一点。每次运行更改检测时都会调用它。最好将方法的结果分配给属性并绑定到该属性，然后在依赖值更改时使用一些事件处理程序或任何合适的方法来更新属性。