Угловое 2 вызывает функцию 4 раза

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 раза, но пользовательский интерфейс показывает только 3 раза. (См. this second plunk). Со вторым плунгом Angular делает ошибку Выражение изменилось после его проверки.

Если включить режим производства, он вызывается только дважды.

Мои вопросы:

1. Есть ли способ избежать этого? Или я должен знать об этом и не должен выполнять тяжелые операции в функциях, называемых шаблонами.
2. Это связано с циклами переваривания?
3. В режиме разработчика, почему цикл вперед не обновить пользовательский интерфейс, и поэтому он останавливается на 3-й итерации, но функция не дозвонились 4-й раз?

Answer 1

Его вообще не рекомендуется использовать function в Angular2 bindings/interpolation.

вы должны использовать переменную вместо, как показано ниже,

template: `<h1>Hello {{name}}</h1>{{myVar}}` 


name:string=''; 

constructor(){ 
    this.print();   
} 

public print():string { 
    console.log(`Called`); 
    this.name = "Hello"; 
    }