Angular2 ngfor calling method 3times

Question

I try to call a method inside ngfor with

*ngFor=" let day of Days()" >{{day}}

The method:

Days(){
 console.log("check");
 return [1,2,3,4,5,6,7];
}

It executes the template once, but the problem is that it logs in console 3 times "check". Why it calls this function 3 times?

Template

<div class="table-responsive">
    <table class="table table-bordered year">
        <tr>
            <td *ngFor=" let day of Days()" >{{day}}</td>
        </tr>
    </table>
</div>

controller

export class MonthComponent{
    //public num: number;
    public lastday: number; 
    num = 1;
    Days(){
        console.log("check");
        return [1,2,3,4,5,6,7];
    }

    getDays(){

        if( this.num == 1 ){
            let j=1;
            let d = new Date();
            let day = d.getDay();
            let today = d.getDate();
            let dif = today % 7;
            let days = [];
            if( day - dif <0){
                dif = day - dif + 8;
            }
            else dif = day-dif;
            for (let i = 0; i != 7; i+=1) {
                if(i < dif-1) days.push(31-dif+i+2);
                else {
                    days.push(j);
                    j+=1;
                }
                //console.log(days);

            }
            this.lastday = j-1;
            this.num +=1;
            console.log(days);

            return days;
        }
        else{
            let j = this.lastday;
            let days = []
            for (var i = 0; i < 7;i+=1) {
                j +=1;
                days.push(j)

            }
            this.lastday = j;
            console.log(days);
            console.log(this.num);

            this.num +=1;
            return days;
        }
    }
}

Days() is test function, indeed i need getDays()

Answer 1

Try to avoid using functions/methods in bindings. Angular2 change detection executes them every time change detection is run.

Because for every call a different array instance is returned from Days() Angular2 change detection throws ""Expression has changed after it was checked." because this way change detection can't figure out when the model has settled because every time change detection checks it has changed (it doesn't check the content of the array, only the object identity)

To work around assign the result of the function to a property and use this property in bindings instead:

class MyComponent {
  constructor() {
    this.Days();
  }

  days:<number>[];

  Days(){
   console.log("check");
   this.days = [1,2,3,4,5,6,7];
  }
}

<div class="table-responsive">
    <table class="table table-bordered year">
        <tr>
            <td *ngFor=" let day of days" >{{day}}</td>
        </tr>
    </table>
</div>