Ich arbeite mit Angular2 und möchte, dass ein Element basierend auf dem Ergebnis eines Funktionsaufrufs bedingt angezeigt wird.

Dabei ist mir aufgefallen, dass die Funktion mehrfach aufgerufen wird.

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello</h1>
    <div *ngIf="returnsTrue()">
       <h1>World</h1>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }

    returnsTrue(): boolean {
        console.log('Returning true');
        return true;
    }
}

Siehe dazugehörige plnkr:

http: //plnkr.co/edit/MScwD3LaIj9YfBlwWltw? p = preview

Das console.log-Protokoll "Returning true" wird viermal ausgegeben.

Kann mir jemand sagen, warum dies passiert?

Und gibt es sowieso, um das zu vermeiden?

Ich habe den folgenden Beitrag gesehen, der sich auf Angular 1 und den für Angular2 neu geschriebenen Digest-Zyklus bezieht. Ich bin mir nicht sicher, ob er relevant ist:

ng-wenn mehrmals aufgerufen wird als es sollte