Angular2 ngfor调用方法3次

Question

我尝试在 ngfor 中调用一个方法

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

方法:

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

它执行一次模板，但问题是它登录控制台 3 次“检查”。 为什么它调用这个函数 3 次？

模板

<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() 是测试函数，确实我需要 getDays()

Answer 1

尽量避免在绑定(bind)中使用函数/方法。每次运行变更检测时，Angular2 变更检测都会执行它们。

因为每次调用都会从 Days() 返回一个不同的数组实例 Angular2 变化检测抛出“”表达式在检查后发生了变化。模型已经稳定下来，因为每次变化检测都会检查它是否发生了变化(它不检查数组的内容，只检查对象标识)

要变通将函数的结果分配给属性并在绑定(bind)中使用此属性:

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>