Angular2 * ngIf = "afunctioncall()" führt dazu, dass die Funktion 9 mal aufgerufen wird

Question

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

Wenn ich dies tue, habe ich bemerkt, dass die Funktion mehrmals 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 assoziiert plnkr:

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

Der 'Return true' console.log Ausgang ist 4-mal.

Kann jemand mich darauf hinweisen, warum dies auftritt?

Und gibt es es sowieso, um es zu vermeiden?

Ich habe den folgenden Beitrag jedoch damit zu Angular 1 und der Digest-Zyklus für Angular2 neu geschrieben wird ich es relevant ist nicht sicher bin, im Zusammenhang gesehen werden:

ng-if being called more times than it should

Answer 1

Ich vermute, dass Ihre Die Funktion wird bei jedem Änderungserkennungszyklus aufgerufen, insbesondere im Dev-Modus, wenn Angular den Ausdruck im *ngIf mehrfach auf Änderungen prüft und dabei die Funktion aufruft.

Eine Möglichkeit, es zu vermeiden, wäre eine Klassenvariable in Ihrer Funktion zu ändern und überwachen diese Variable in Ihrer *ngIf:

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

    setTimeout(() => { 
     this.returnsTrue(); 
    }, 5000); 

    } 

    returnsTrue(): boolean { 
     console.log('Returning true'); 
     this.isTrue = true; 
    } 
} 

ich adapted your Plunker dies zu zeigen.