javascript - Angular 2 : ngFor keeps executing after page is rendered

Question

我正在创建一个可重用的表格组件。在尝试在该组件上实现分页时，我首先注意到我无法在不创建虚拟数组的情况下执行简单的“for”循环。

作为一种黑客攻击，我实现了以下内容:

HTML:

<ul class="pagination hidden-xs pull-right">
    <li *ngFor="let item of createRange(); let pageNum = index;">
        <a (click)="goToPage(pageNum+1)">{{pageNum+1}}</a>
    </li>
</ul>

组件:

createRange() {
    var items: number[] = [];
    for (let i = 1; i <= this.totalPages; i++) {
        items.push(i);
    }
    console.log(items);
    return items;
}

这里的问题(或者可能是预期的行为)是，我看到虚拟对象一遍又一遍地记录到控制台，即使看起来该页面已完成渲染。

这是因为它想继续检查更改吗？有没有更有效的方法来显示 HTML 中的页数，这样它就不会一遍又一遍地调用 createRange() 方法？

Answer 1

对于绑定(bind)，不应使用函数，而应使用变量。如果您使用函数，则每次 Angular2 运行绑定(bind)检查时都会调用该函数。根本不建议使用函数进行绑定(bind)。

<li *ngFor="let item of myArr; let pageNum = index;">    //<<<@@@ myArr
        <a (click)="goToPage(pageNum+1)">{{pageNum+1}}</a>
    </li>

constructor(){
   this.myArr=this.createRange();                        //<<<@@@ using myArr variable.
}

createRange() {
    var items: number[] = [];
    for (let i = 1; i <= this.totalPages; i++) {
        items.push(i);
    }
    console.log(items);
    return items;
}