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

对于绑定，您不应使用 function 而是使用 variable 。如果使用函数，则每次angular2运行绑定检查时都会调用它。建议不要使用函数进行绑定。

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

Angular2：ngFor在呈现页面后继续执行

1 个答案: