Angular2 ngfor调用方法3次

Question

我尝试使用

在 ngfor 中调用一个方法

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

方法：

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

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

模板

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

控制器

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

尽量避免在绑定中使用 functions/methods。 Angular2 变更检测会在每次变更检测运行时执行它们。

因为每次调用都会从 Days() 返回不同的数组实例 Angular2 变化检测抛出“"Expression has changed after it was checked." 因为这种方式变化检测无法确定模型何时稳定下来因为每次变化检测检查它是否已更改（它不检查数组的内容，仅检查对象标识）

要解决将函数的结果分配给属性并在绑定中使用此属性的方法：

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>

Angular2 ngfor调用方法3次

Angular2 ngfor calling method 3times

angular

methods

ngfor