Angular2 * ngIf = "afunctioncall()" समारोह में परिणाम 9 बार

Question

बुलाया जा रहा है मैं Angular2 साथ काम कर रहा हूँ और एक तत्व सशर्त एक समारोह कॉल का परिणाम के आधार पर प्रदर्शित करना चाहते हैं।

जब मैं ऐसा करता हूं तो मैंने देखा है कि फ़ंक्शन को कई बार कहा जाता है।

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

'रिटर्निंग सच' console.log उत्पादन 4 बार है:

@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; 
    } 
} 

जुड़े plnkr देखें।

क्या कोई मुझे बता सकता है कि ऐसा क्यों होता है?

और क्या इससे बचने के लिए वैसे भी है?

मैं के साथ यह कोणीय 1 से संबंधित होने और डाइजेस्ट चक्र की जा रही Angular2 के लिए फिर से लिखा तथापि निम्नलिखित पोस्ट देखा है मुझे यकीन है कि यह प्रासंगिक है नहीं कर रहा हूँ:

ng-if being called more times than it should

Answer 1

मुझे लगता है कि संदेह है कि आपका फ़ंक्शन को प्रत्येक परिवर्तन पहचान चक्र पर विशेष रूप से देव मोड में कहा जाता है, जब कोणीय कई बार परिवर्तनों के लिए *ngIf में अभिव्यक्ति की जांच कर रहा है, और ऐसा करने से फ़ंक्शन को कॉल किया जा रहा है।

एक तरह से यह अपने समारोह में एक वर्ग चर बदलने के लिए किया जाएगा से बचने के लिए, और अपने *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; 
    } 
} 

मैं adapted your Plunker इस दिखाने के लिए।