Question

请参阅此plunk。

它基于角度快速启动示例，此处模板正在调用函数。

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次。（参考this second plunk）。使用第二个插件时，Angular会抛出错误表达式在检查后发生了变化。

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

我的问题是：

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

Answer 1

根本没有建议在 Angular2 bindings/interpolation 中使用 template: `<h1>Hello {{name}}</h1>{{myVar}}` name:string=''; constructor(){ this.print(); } public print():string { console.log(`Called`); this.name = "Hello"; } 。

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

{{1}}

Angular 2调用函数4次

1 个答案: